box detail fix

Author: rabbitson87

frontend/src/components/ServerListView.tsx

@@ -498,40 +498,44 @@ export function ServerListView({
 
               {/* Live Apps Section — sample.html line 146-284 */}
               <section className="max-w-7xl mx-auto px-6 mb-32 scroll-mt-24" id="live-servers">
-                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
-                  <div>
-                    <h2 className="text-3xl font-extrabold tracking-tight mb-2">Browse live apps</h2>
-                    <p className="text-text-muted">Explore public tunnels currently active on the network.</p>
-                  </div>
-                  <div className="flex flex-wrap gap-3">
-                    {/* search pill — replaces mockup line 153-158 static input */}
-                    <div className="bg-secondary px-4 py-2 rounded-xl flex items-center gap-2 border border-border/10">
-                      <Search className="text-text-muted h-[18px] w-[18px]" />
-                      <input
-                        className="bg-transparent border-none p-0 text-sm w-32 text-foreground outline-none placeholder:text-text-muted"
-                        placeholder="Search apps..."
-                        type="text"
-                        value={searchQuery}
-                        onChange={(e) => onSearchChange(e.target.value)}
+                <div className="mb-12 space-y-4">
+                  <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+                    <div>
+                      <h2 className="text-3xl font-extrabold tracking-tight mb-2">Browse live apps</h2>
+                      <p className="text-text-muted">Explore public tunnels currently active on the network.</p>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <div className="flex flex-wrap gap-3">
+                        {/* search pill — replaces mockup line 153-158 static input */}
+                        <div className="bg-secondary px-4 py-2 rounded-xl flex items-center gap-2 border border-border/10">
+                          <Search className="text-text-muted h-4.5 w-4.5" />
+                          <input
+                            className="bg-transparent border-none p-0 text-sm w-32 text-foreground outline-none placeholder:text-text-muted"
+                            placeholder="Search apps..."
+                            type="text"
+                            value={searchQuery}
+                            onChange={(e) => onSearchChange(e.target.value)}
+                          />
+                        </div>
+                        {/* status select — replaces mockup line 159-163 static button */}
+                        <StatusSelect
+                          status={status}
+                          onStatusChange={onStatusChange}
+                        />
+                        {/* sort select — replaces mockup line 164-168 static button */}
+                        <SortbySelect
+                          sortBy={sortBy}
+                          onSortByChange={onSortByChange}
+                        />
+                      </div>
+                      {/* tag combobox — replaces mockup line 169-173 static button */}
+                      <TagCombobox
+                        availableTags={availableTags}
+                        selectedTags={selectedTags}
+                        onAdd={onTagToggle}
+                        onRemove={onTagToggle}
                       />
                     </div>
-                    {/* status select — replaces mockup line 159-163 static button */}
-                    <StatusSelect
-                      status={status}
-                      onStatusChange={onStatusChange}
-                    />
-                    {/* sort select — replaces mockup line 164-168 static button */}
-                    <SortbySelect
-                      sortBy={sortBy}
-                      onSortByChange={onSortByChange}
-                    />
-                    {/* tag combobox — replaces mockup line 169-173 static button */}
-                    <TagCombobox
-                      availableTags={availableTags}
-                      selectedTags={selectedTags}
-                      onAdd={onTagToggle}
-                      onRemove={onTagToggle}
-                    />
                   </div>
                 </div>
                 {/* App Grid (Bento Style) — sample.html line 177, cards replaced with dynamic ServerCard */}
@@ -565,7 +569,7 @@ export function ServerListView({
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      <Code className="h-[18px] w-[18px]" />
+                      <Code className="h-4.5 w-4.5" />
                       Open registry.json
                     </a>
                   </div>

frontend/src/components/TagCombobox.tsx

@@ -125,7 +125,7 @@ export function TagCombobox({
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
             placeholder="Add tag…"
-            className="min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-text-muted"
+            className="min-w-30 flex-1 bg-transparent text-sm outline-none placeholder:text-text-muted"
             role="combobox"
             aria-expanded={open}
             aria-controls={listId}

frontend/src/index.css

@@ -42,7 +42,7 @@
     --card-foreground: oklch(22.6% 0.033 98);
     --popover: oklch(100% 0 0);
     --popover-foreground: oklch(22.6% 0.033 98);
-    --primary: oklch(61% 0.214 257);
+    --primary: oklch(51.1% 0.278 277);
     --primary-foreground: oklch(100% 0 0);
     --secondary: oklch(93.1% 0.042 92);
     --secondary-foreground: oklch(22.6% 0.033 98);
@@ -54,7 +54,7 @@
     --destructive-foreground: oklch(100% 0 0);
     --border: oklch(83% 0.031 294);
     --input: oklch(96.4% 0.042 92);
-    --ring: oklch(61% 0.214 257);
+    --ring: oklch(51.1% 0.278 277);
 
     --green-status: oklch(57.1% 0.095 263);
     --text-muted: oklch(57% 0.014 271);
@@ -87,8 +87,8 @@
     --card-foreground: oklch(91.5% 0.007 295);
     --popover: oklch(26.5% 0.008 275);
     --popover-foreground: oklch(91.5% 0.007 295);
-    --primary: oklch(58.7% 0.092 179);
-    --primary-foreground: oklch(100% 0 0);
+    --primary: oklch(71.5% 0.103 179);
+    --primary-foreground: oklch(15% 0 0);
     --secondary: oklch(23.6% 0.008 275);
     --secondary-foreground: oklch(91.5% 0.007 295);
     --muted: oklch(26.5% 0.008 275);
@@ -99,7 +99,7 @@
     --destructive-foreground: oklch(98% 0 0);
     --border: oklch(36.9% 0.009 277);
     --input: oklch(23.6% 0.008 275);
-    --ring: oklch(58.7% 0.092 179);
+    --ring: oklch(71.5% 0.103 179);
 
     --green-status: oklch(96.7% 0.065 137);
     --text-muted: oklch(69% 0.007 277);
@@ -113,15 +113,15 @@
     --hero-gradient-end: var(--accent-orange);
     --hero-terminal-bg:
       linear-gradient(160deg, oklch(19% 0 0 / 0.78), oklch(12% 0.01 250 / 0.88));
-    --hero-terminal-border: oklch(58.7% 0.092 179 / 0.3);
+    --hero-terminal-border: oklch(71.5% 0.103 179 / 0.3);
     --hero-terminal-foreground: oklch(91.5% 0.007 295);
     --hero-terminal-accent: var(--neon-cyan);
     --hero-terminal-shadow: oklch(0% 0 0 / 0.28);
 
     --card-media-fallback-start: oklch(26% 0.03 235);
     --card-media-fallback-end: oklch(18% 0.02 260);
     --card-media-overlay:
-      radial-gradient(circle at top left, oklch(58.7% 0.092 179 / 0.26), transparent 36%),
+      radial-gradient(circle at top left, oklch(71.5% 0.103 179 / 0.26), transparent 36%),
       linear-gradient(180deg, transparent, oklch(10% 0 0 / 0.78));
   }