Merge pull request 'fix(ui): softer chrome-gradient falloff + segmented media toggle (#1478)' (#228) from dev into main

frontend/src/components/TopNav.vue

@@ -145,12 +145,17 @@ const health = computed(() => {
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
-  /* Obsidian (#14171A = 20,23,26) gradient fade — content scrolls under it. */
+  /* Obsidian (#14171A) fade — content scrolls under it. Holds high (0.92 →
+     0.84) through the top half, then eases to transparent over the bottom
+     quarter so it tails off softly instead of a straight line to a hard edge
+     (operator 2026-07-13). Shared --fc-chrome-rgb keeps it in sync with the
+     sub-header continuation. */
   background: linear-gradient(
     to bottom,
-    rgba(20, 23, 26, 0.92) 0%,
-    rgba(20, 23, 26, 0.65) 60%,
-    rgba(20, 23, 26, 0) 100%
+    rgba(var(--fc-chrome-rgb), 0.92) 0%,
+    rgba(var(--fc-chrome-rgb), 0.84) 50%,
+    rgba(var(--fc-chrome-rgb), 0.55) 75%,
+    rgba(var(--fc-chrome-rgb), 0) 100%
   );
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -165,7 +170,7 @@ const health = computed(() => {
   background: linear-gradient(
     to bottom,
     rgba(var(--fc-chrome-rgb), 0.92) 0%,
-    rgba(var(--fc-chrome-rgb), 0.72) 55%,
+    rgba(var(--fc-chrome-rgb), 0.84) 60%,
     rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 100%
   );
 }

frontend/src/components/gallery/GalleryFilterBar.vue

@@ -331,6 +331,20 @@ function pushFilter(mutate) {
 .fc-filterbar-wrap :deep(.v-btn-group) {
   background-color: rgba(20, 23, 26, 0.72);
 }
+/* Media toggle (All / Images / Videos) as ONE cohesive segmented control.
+   FC's global VBtn { rounded: 'pill' } default made Vuetify 4 pill-round each
+   SEGMENT individually, so the rounded ends collided at the joins — the shapes
+   landed awkwardly on the button edges (operator 2026-07-13). Square the inner
+   segments (over the pill utility's !important) and clip the group to a single
+   8px outline (matches the chips/tiles rounding elsewhere in the app). Radius
+   only — no height change, so the bar height and nav offset are untouched. */
+.fc-filterbar-wrap :deep(.v-btn-toggle) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.fc-filterbar-wrap :deep(.v-btn-toggle .v-btn) {
+  border-radius: 0 !important;
+}
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 /* The tag chips' bodies toggle include/exclude — signal they're clickable. */

frontend/src/styles/app.css

@@ -77,7 +77,13 @@
    legible tabs/controls over scrolling content), lower it for a lighter fade. */
 :root {
   --fc-chrome-rgb: 20, 23, 26;   /* obsidian #14171A — matches the TopNav */
-  --fc-chrome-seam: 0.46;        /* alpha where the nav hands off to the sub-header */
+  /* Alpha where the nav hands off to the sub-header — also the "hold" level of
+     the fade. The chrome stays fairly opaque (0.92 → this) through the bulk of
+     its height, then drops to transparent in a small eased section at the very
+     bottom (see the multi-stop gradients), so it reads as a slow falloff that
+     tails off softly rather than a straight line to a hard edge (operator
+     2026-07-13). Raise for heavier/​more-legible chrome, lower for a lighter fade. */
+  --fc-chrome-seam: 0.68;
   /* Actual TopNav height, measured live (ResizeObserver in TopNav.vue) and used
      by full-height workspaces (Explore/Subscriptions: calc(100vh - var)) and by
      every sticky sub-header pinned beneath the nav (top: var). This was a
@@ -92,9 +98,16 @@
    controls legible as the fill thins toward transparent — the solid-surface
    bars it replaces had none, so it must live here. */
 .fc-chrome-continues {
+  /* Continues the nav's fade: HOLDS near the seam alpha through the first ~55%
+     (subtle), then eases down to transparent over the last ~45% with an
+     intermediate stop so the tail is soft — no hard line at the bottom edge
+     (operator 2026-07-13). Percentage stops keep the shape spanning the
+     element's height (survives the filter bar's expanding refine panel). */
   background: linear-gradient(
     to bottom,
     rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 0%,
+    rgba(var(--fc-chrome-rgb), 0.60) 55%,
+    rgba(var(--fc-chrome-rgb), 0.28) 82%,
     rgba(var(--fc-chrome-rgb), 0) 100%
   );
   backdrop-filter: blur(2px);