add descriptions

web/src/components/settings/SearchSettings.tsx

@@ -12,6 +12,7 @@ import {
   SelectItem,
   SelectTrigger,
 } from "@/components/ui/select";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 
 type SearchSettingsProps = {
   className?: string;
@@ -36,24 +37,15 @@ export default function SearchSettings({
     </Button>
   );
   const content = (
-    <div className={cn(className, "space-y-3")}>
+    <div className={cn(className, "mb-3 space-y-5")}>
-      <div className="flex w-full flex-col space-y-4">
-        <div className="text-md leading-none">Grid Columns</div>
-        <div className="flex items-center space-x-4">
-          <Slider
-            value={[columns]}
-            onValueChange={([value]) => setColumns(value)}
-            max={6}
-            min={2}
-            step={1}
-            className="flex-grow"
-          />
-          <span className="w-9 text-center text-sm font-medium">{columns}</span>
-        </div>
-      </div>
-
       <div className="space-y-4">
-        <div className="text-md">Default View</div>
+        <div className="space-y-0.5">
+          <div className="text-md">Default Search View</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            When no filters are selected, display a summary of the 10 most
+            recent tracked objects per label, or display an unfiltered grid.
+          </div>
+        </div>
         <Select
           value={defaultView}
           onValueChange={(value) => setDefaultView(value)}
@@ -76,6 +68,26 @@ export default function SearchSettings({
           </SelectContent>
         </Select>
       </div>
+      <DropdownMenuSeparator />
+      <div className="flex w-full flex-col space-y-4">
+        <div className="space-y-0.5">
+          <div className="text-md">Grid Columns</div>
+          <div className="space-y-1 text-xs text-muted-foreground">
+            Select the number of columns in the results grid.
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Slider
+            value={[columns]}
+            onValueChange={([value]) => setColumns(value)}
+            max={6}
+            min={2}
+            step={1}
+            className="flex-grow"
+          />
+          <span className="w-9 text-center text-sm font-medium">{columns}</span>
+        </div>
+      </div>
     </div>
   );