fix: remove gap above sticky header on mobile

Author: yash-sangwan

frontend/src/app/dashboard/browse/page.tsx

@@ -256,19 +256,20 @@ function BrowsePageContent() {
       )}
 
       <div className="relative">
-        <div className="sticky top-[-26px] z-10 flex items-center justify-between gap-4 py-4 bg-background">
-          <div className="flex items-center gap-2">
-            <h2 className="text-2xl font-normal text-foreground">{currentFolderName}</h2>
+        <div className="sticky top-[-12px] sm:top-[-26px] z-20 flex items-start sm:items-center justify-between gap-3 sm:gap-4 py-3 sm:py-4 px-1 sm:px-0 bg-background border-b border-border/30 sm:border-b-0">
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2 min-w-0 flex-1">
+            <h2 className="text-lg sm:text-xl lg:text-2xl font-normal text-foreground break-words leading-tight sm:leading-normal">
+              {currentFolderName}
+            </h2>
             {totalVisibleItems > 0 && (
-              <span className="item-count-badge">
+              <span className="item-count-badge flex-shrink-0 self-start sm:self-auto">
                 {hasMoreItems || canLoadMoreChunks
                   ? `Showing ${totalVisibleItems.toLocaleString()}+ items`
                   : `${totalVisibleItems.toLocaleString()} item${totalVisibleItems === 1 ? '' : 's'}`}
               </span>
             )}
           </div>
 
-          {/* Sync/Refresh Button */}
           <button
             onClick={handleSync}
             disabled={isSyncing}

frontend/src/app/globals.css

@@ -285,9 +285,20 @@ body {
   font-weight: 500;
   padding: 0.25rem 0.75rem;
   border-radius: 0.5rem;
-  margin-left: 0.75rem;
   backdrop-filter: blur(4px);
   transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+@media (max-width: 640px) {
+  .item-count-badge {
+    font-size: 0.625rem;
+    padding: 0.125rem 0.5rem;
+    max-width: 150px;
+  }
 }
 
 .show-more-btn {