Compact the shared filter-panel controls to the approved density

frontend/src/common/constants.ts

@@ -95,6 +95,12 @@ export const Back: Faces = "back";
 export const NavPillButtonHeight = 40; // pixels
 export const NavUnderlineButtonHeight = 42; // pixels
 export const ToggleButtonHeight = 38; // pixels
+// Compact metrics for dense filter panels (grid-selector modal, search settings):
+// Bootstrap sm control height so full-width toggle bars stay short in narrow panels.
+// The 38px ToggleButtonHeight above stays the binding value for the
+// /display rail's source toggles (SPEC-display-left-rail.md) - do not conflate them.
+export const CompactToggleHeight = 31; // pixels
+export const SourceToggleWidth = 88; // pixels
 // The tag name behind the default mature-content exclusion. Must match the backend's
 // cardpicker/constants.py NSFW constant - it's the same string filename-bracket tagging
 // writes into Card.tags and the seeded sensitive tag uses (docs/features/moderation.md).

frontend/src/features/filters/CompressedFilter.tsx

@@ -2,7 +2,7 @@ import Form from "react-bootstrap/Form";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight } from "@/common/constants";
 
 interface CompressedFilterProps {
   compressed: boolean;
@@ -24,9 +24,9 @@ export const CompressedFilter = ({
         offClassName="flex-centre"
         onstyle="info"
         offstyle="success"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={compressed}
       />
     </>

frontend/src/features/filters/MatureContentFilter.tsx

@@ -11,7 +11,7 @@ import Container from "react-bootstrap/Container";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { NSFW_TAG_NAME, ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight, NSFW_TAG_NAME } from "@/common/constants";
 import { FilterSettings } from "@/common/schema_types";
 
 interface MatureContentFilterProps {
@@ -48,9 +48,9 @@ export function MatureContentFilter({
         offClassName="flex-centre"
         onstyle="warning"
         offstyle="info"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={showingMatureContent}
       />
     </Container>

frontend/src/features/filters/ResolvedAttributeFilter.tsx

@@ -10,7 +10,7 @@ import Container from "react-bootstrap/Container";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight } from "@/common/constants";
 import { FilterSettings } from "@/common/schema_types";
 
 interface ResolvedAttributeFilterProps {
@@ -45,9 +45,9 @@ export function ResolvedAttributeFilter({
         offClassName="flex-centre"
         onstyle="success"
         offstyle="info"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={filterSettings.fullArtOnly}
       />
       <br />
@@ -65,9 +65,9 @@ export function ResolvedAttributeFilter({
         offClassName="flex-centre"
         onstyle="success"
         offstyle="info"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={filterSettings.borderlessOnly}
       />
     </Container>

frontend/src/features/filters/SourceBackendFilter.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight } from "@/common/constants";
 import { BackendType } from "@/common/types";
 import {
   useGoogleDriveBackendConfigured,
@@ -45,9 +45,9 @@ export const SourceBackendFilter = ({
         offClassName="flex-centre"
         onstyle="success"
         offstyle="info"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={backendType === "remote"}
         disabled={!(remoteBackendConfigured && localBackendConfigured)}
       />

frontend/src/features/gridSelector/GridSelectorFilters.tsx

@@ -49,7 +49,9 @@ interface GridSelectorFiltersProps {
    * rail forces compressed tiles anyway (Bkg 4 - the "Card display style"/Compressed toggle is
    * near-inert there and clips at the rail edge) - both controls live inside the one "View"
    * accordion (ViewSettings.tsx), so hiding that section kills both in one exclusion. */
-  hiddenSections?: Array<"jump" | "view" | "sort" | "filter">;
+  hiddenSections?: Array<
+    "jump" | "view" | "sort" | "filter" | "filter-sources" | "filter-attributes"
+  >;
 }
 
 export const GridSelectorFilters = ({
@@ -145,14 +147,19 @@ export const GridSelectorFilters = ({
               maxDPIUpperBound={projectFilter?.maximumDPI}
               maxSizeUpperBound={projectFilter?.maximumSize}
               showBoilerplate={false}
+              // The rail's chip fieldset already covers these (SPEC-display-left-rail.md) -
+              // the rail caller hides the stock duplicates; modal/browse callers keep them.
+              showResolvedAttributeFilter={!hidden.has("filter-attributes")}
               // allowedLanguages={allowedLanguages}
             />
-            <SourceSettingsElement
-              sourceSettings={sourceSettings}
-              setSourceSettings={setSourceSettings}
-              enableReorderingSources={false}
-              showBoilerplate={false}
-            />
+            {!hidden.has("filter-sources") && (
+              <SourceSettingsElement
+                sourceSettings={sourceSettings}
+                setSourceSettings={setSourceSettings}
+                enableReorderingSources={false}
+                showBoilerplate={false}
+              />
+            )}
           </>
         </AutofillCollapse>
       )}

frontend/src/features/gridSelector/SelectVersionResults.tsx

@@ -1646,8 +1646,16 @@ export function SelectVersionResults({
       setSourceSettings={search.setSourceSettings}
       projectFilter={search.projectFilter}
       // E4/X4 (Bkg 3/4) - only the stacked (rail) caller hides "View" (Group-by/Compressed);
-      // the sidebar (modal/browse) callers are unaffected.
-      hiddenSections={layout === "stacked" ? ["view"] : undefined}
+      // the sidebar (modal/browse) callers are unaffected. 2026-07-24 owner escalation:
+      // the rail also hides the stock sources table and attribute toggle bars - the rail's
+      // own SOURCES accordion and Treatment/Frame/Border chip fieldset are the designed
+      // versions of both (SPEC-display-left-rail.md), and rendering the stock duplicates
+      // beneath them was the "looks nothing like Quorra's spec" report.
+      hiddenSections={
+        layout === "stacked"
+          ? ["view", "filter-sources", "filter-attributes"]
+          : undefined
+      }
     />
   );
 

frontend/src/features/searchSettings/FilterSettings.tsx

@@ -26,6 +26,11 @@ interface FilterSettingsProps {
   maxSizeUpperBound?: number;
   allowedLanguages?: Array<string>;
   showBoilerplate?: boolean;
+  /** The /display rail already renders the spec's Treatment/Frame/Border chip fieldset
+   * (SPEC-display-left-rail.md), so its embedding of this panel hides the duplicate
+   * stock attribute toggles. Every other caller (Search Settings modal, classic grid
+   * selector) leaves this true and is unchanged. */
+  showResolvedAttributeFilter?: boolean;
 }
 
 export function FilterSettings({
@@ -36,6 +41,7 @@ export function FilterSettings({
   maxSizeUpperBound,
   allowedLanguages,
   showBoilerplate = true,
+  showResolvedAttributeFilter = true,
 }: FilterSettingsProps) {
   return (
     <>
@@ -80,11 +86,15 @@ export function FilterSettings({
         filterSettings={filterSettings}
         setFilterSettings={setFilterSettings}
       />
-      <br />
-      <ResolvedAttributeFilter
-        filterSettings={filterSettings}
-        setFilterSettings={setFilterSettings}
-      />
+      {showResolvedAttributeFilter && (
+        <>
+          <br />
+          <ResolvedAttributeFilter
+            filterSettings={filterSettings}
+            setFilterSettings={setFilterSettings}
+          />
+        </>
+      )}
     </>
   );
 }

frontend/src/features/searchSettings/SearchTypeSettings.tsx

@@ -9,7 +9,7 @@ import Container from "react-bootstrap/Container";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight } from "@/common/constants";
 import { SearchTypeSettings as SearchTypeSettingsType } from "@/common/types";
 
 interface SearchTypeSettingsProps {
@@ -44,9 +44,9 @@ export function SearchTypeSettings({
         offClassName="flex-centre"
         onstyle="success"
         offstyle="info"
-        width={100 + "%"}
-        size="md"
-        height={ToggleButtonHeight + "px"}
+        width={"100%"}
+        size="sm"
+        height={CompactToggleHeight + "px"}
         active={searchTypeSettings.fuzzySearch}
       />
       {enableFiltersApplyToCardbacks && (
@@ -66,9 +66,9 @@ export function SearchTypeSettings({
             offClassName="flex-centre"
             onstyle="success"
             offstyle="info"
-            width={100 + "%"}
-            size="md"
-            height={ToggleButtonHeight + "px"}
+            width={"100%"}
+            size="sm"
+            height={CompactToggleHeight + "px"}
             active={searchTypeSettings.filterCardbacks}
           />
         </>

frontend/src/features/searchSettings/SourceSettings.tsx

@@ -15,7 +15,7 @@ import Table from "react-bootstrap/Table";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight, SourceToggleWidth } from "@/common/constants";
 import {
   SourceDocument,
   SourceRow as SourceRowType,
@@ -64,9 +64,9 @@ const SourceRow = ({
           offClassName="flex-centre prevent-select"
           onstyle="primary"
           offstyle="secondary"
-          size="md"
-          width={80 + "%"}
-          height={ToggleButtonHeight + "px"}
+          size="sm"
+          width={SourceToggleWidth + "px"}
+          height={CompactToggleHeight + "px"}
           active={enabled}
           onClick={() => toggleSpecificSourceActiveStatus(index)}
         />
@@ -208,10 +208,20 @@ export function SourceSettings({
   if (maybeSourceDocuments != null) {
     sourceTable = (
       <DragDropProvider onDragEnd={onDragEnd}>
-        <Table variant="secondary" style={{ tableLayout: "auto" }}>
+        <Table
+          size="sm"
+          style={{
+            tableLayout: "auto",
+            fontSize: 14,
+            // dark panel tokens per the approved /display theme - not Bootstrap's
+            // grey "secondary" table variant (the pre-2026-07-24 look)
+            backgroundColor: "#22303f",
+            border: "1px solid rgba(0,0,0,.22)",
+          }}
+        >
           {/* TODO: migrate this to AutofillTable at some point? too big a job for right now. */}
           <thead>
-            <tr style={{ height: ToggleButtonHeight + "px" }}>
+            <tr style={{ height: CompactToggleHeight + "px" }}>
               <th className="prevent-select">Active</th>
               <th className="prevent-select">Name</th>
               <th />
@@ -262,7 +272,7 @@ export function SourceSettings({
         </>
       )}
       <div className="d-grid gap-0 mt-3">
-        <Button variant="primary" onClick={toggleAllSourceActiveness}>
+        <Button size="sm" variant="primary" onClick={toggleAllSourceActiveness}>
           {anySourcesActive ? "Disable" : "Enable"} all drives
         </Button>
       </div>

frontend/src/features/viewSettings/ViewSettings.tsx

@@ -8,7 +8,7 @@ import React from "react";
 // @ts-ignore: https://github.com/arnthor3/react-bootstrap-toggle/issues/21
 import Toggle from "react-bootstrap-toggle";
 
-import { ToggleButtonHeight } from "@/common/constants";
+import { CompactToggleHeight } from "@/common/constants";
 import { useAppDispatch, useAppSelector } from "@/common/types";
 import {
   selectFrontsVisible,
@@ -27,9 +27,9 @@ export function ViewSettings() {
       offClassName="flex-centre"
       onstyle="info"
       offstyle="info"
-      width={100 + "%"}
-      size="md"
-      height={ToggleButtonHeight + "px"}
+      width={"100%"}
+      size="sm"
+      height={CompactToggleHeight + "px"}
       active={frontsVisible}
     />
   );