LocateAnything

Paused

App Files Files Community

fix-bot commited on 5 days ago

Commit

f87148b

1 Parent(s): c271295

ui: make Detected Target Overlays a fixed-height scroll panel

Browse files

Cap the overlays list at 168px with internal scrolling so long detection results no longer stretch the page layout.

Files changed (1) hide show

index.html +24 -4

index.html CHANGED Viewed

@@ -198,6 +198,25 @@
         .det-count-pop {
             animation: det-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
     </style>
 </head>
 <body class="text-slate-100 font-sans min-h-screen pb-16 carbon-grid">
@@ -483,10 +502,10 @@
             <!-- Right: Performance Metrics & Tag draw overlays (Col Span: 7) -->
             <div class="lg:col-span-7 space-y-4">
                 <div class="glass-panel rounded-2xl p-5 space-y-4">
-                    <div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-stretch">
                         <!-- Performance Statistics Metrics Console (Grid: 5) -->
-                        <div class="sm:col-span-5 bg-black/60 rounded-xl p-4 border border-white/5 font-mono text-[10px] text-slate-300 space-y-2 leading-normal">
                             <div class="text-nvidia-brand font-bold border-b border-white/5 pb-1 mb-1.5 uppercase tracking-widest text-[9px] font-mono">📊 Metrics Log</div>
                             <div class="flex justify-between"><span class="text-slate-500">Status:</span> <span id="meta-status" class="text-emerald-500 font-semibold">Idle</span></div>
                             <div class="flex justify-between"><span class="text-slate-500">Tokens/Frames:</span> <span id="meta-tokens">-</span></div>
@@ -496,12 +515,12 @@
                         </div>
                         <!-- Tag drawer box list (Grid: 7) -->
-                        <div class="sm:col-span-7 bg-black/60 rounded-xl p-4 border border-white/5 flex flex-col min-h-[140px]">
                             <div class="text-nvidia-brand font-mono font-bold border-b border-white/5 pb-1 mb-2 uppercase tracking-widest text-[9px] flex justify-between shrink-0">
                                 <span>🎯 Detected Target Overlays</span>
                                 <span id="detection-count-badge" class="text-[8px] bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 px-1.5 py-0.5 rounded-full font-bold">0</span>
                             </div>
-                            <div id="detection-tags-wrapper" class="flex-1 flex flex-col gap-1.5 pt-1 text-[10px] text-slate-500">
                                 <div id="detection-empty-hint" class="space-y-1.5 leading-relaxed">
                                     <p>Run inference to populate detected targets here — each result will pop in one by one.</p>
                                     <p class="text-[9px] text-slate-600">Adjustable: Task Type · Categories · Inference Mode · Resize Cap · Temperature · Top P/K · Max Video Frames</p>
@@ -716,6 +735,7 @@
                     card.appendChild(labelWrap);
                     card.appendChild(coords);
                     detectionTagsWrapper.appendChild(card);
                 }, idx * 80);
             });
         }

         .det-count-pop {
             animation: det-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
+        /* Detected overlays: fixed height, internal scroll */
+        .detection-scroll {
+            min-height: 0;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+            scroll-behavior: smooth;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(118, 185, 0, 0.45) rgba(0, 0, 0, 0.2);
+            mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
+            -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
+        }
+        .detection-scroll::-webkit-scrollbar {
+            width: 5px;
+        }
+        .detection-scroll::-webkit-scrollbar-thumb {
+            background: rgba(118, 185, 0, 0.45);
+            border-radius: 999px;
+        }
     </style>
 </head>
 <body class="text-slate-100 font-sans min-h-screen pb-16 carbon-grid">
             <!-- Right: Performance Metrics & Tag draw overlays (Col Span: 7) -->
             <div class="lg:col-span-7 space-y-4">
                 <div class="glass-panel rounded-2xl p-5 space-y-4">
+                    <div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-start">
                         <!-- Performance Statistics Metrics Console (Grid: 5) -->
+                        <div class="sm:col-span-5 bg-black/60 rounded-xl p-4 border border-white/5 font-mono text-[10px] text-slate-300 space-y-2 leading-normal h-[168px]">
                             <div class="text-nvidia-brand font-bold border-b border-white/5 pb-1 mb-1.5 uppercase tracking-widest text-[9px] font-mono">📊 Metrics Log</div>
                             <div class="flex justify-between"><span class="text-slate-500">Status:</span> <span id="meta-status" class="text-emerald-500 font-semibold">Idle</span></div>
                             <div class="flex justify-between"><span class="text-slate-500">Tokens/Frames:</span> <span id="meta-tokens">-</span></div>
                         </div>
                         <!-- Tag drawer box list (Grid: 7) -->
+                        <div class="sm:col-span-7 bg-black/60 rounded-xl p-4 border border-white/5 flex flex-col h-[168px] overflow-hidden">
                             <div class="text-nvidia-brand font-mono font-bold border-b border-white/5 pb-1 mb-2 uppercase tracking-widest text-[9px] flex justify-between shrink-0">
                                 <span>🎯 Detected Target Overlays</span>
                                 <span id="detection-count-badge" class="text-[8px] bg-nvidia-brand/10 text-nvidia-brand border border-nvidia-brand/20 px-1.5 py-0.5 rounded-full font-bold">0</span>
                             </div>
+                            <div id="detection-tags-wrapper" class="detection-scroll flex-1 flex flex-col gap-1.5 pt-1 text-[10px] text-slate-500">
                                 <div id="detection-empty-hint" class="space-y-1.5 leading-relaxed">
                                     <p>Run inference to populate detected targets here — each result will pop in one by one.</p>
                                     <p class="text-[9px] text-slate-600">Adjustable: Task Type · Categories · Inference Mode · Resize Cap · Temperature · Top P/K · Max Video Frames</p>
                     card.appendChild(labelWrap);
                     card.appendChild(coords);
                     detectionTagsWrapper.appendChild(card);
+                    detectionTagsWrapper.scrollTop = detectionTagsWrapper.scrollHeight;
                 }, idx * 80);
             });
         }