refactor: Adjust z-index values for footer and sidebar components to improve layering

Author: wictorwilen

web/src/App.tsx

@@ -182,16 +182,7 @@ function AppContent() {
 
   return (
     <div className='flex h-screen bg-gray-50 dark:bg-gray-900'>
-      {/* Sidebar */}
-      <Sidebar
-        categories={categories}
-        selectedCategory={selectedCategory}
-        onCategorySelect={handleCategorySelect}
-        showFavoritesOnly={showFavoritesOnly}
-        onToggleFavorites={handleToggleFavorites}
-        isOpen={sidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-      />
+
 
       {/* Main content */}
       <div className='flex flex-1 flex-col overflow-hidden'>
@@ -205,49 +196,61 @@ function AppContent() {
           sidebarOpen={sidebarOpen}
           onShowCookiePreferences={() => setShowCookiePreferences(true)}
         />
-
-        {/* Main content area */}
-        <main className='flex-1 overflow-y-auto'>
-          <div className='mx-auto max-w-7xl px-4 py-6 pb-20 sm:px-6 lg:px-8'>
-            {/* Hero section */}
-            {!searchQuery && !selectedCategory && !showFavoritesOnly && (
-              <div className='mb-8 text-center'>
-                <h1 className='mb-4 text-4xl font-bold text-gray-900 dark:text-gray-100'>
-                  <span className='text-gradient'>Fluent Jot</span>
-                </h1>
-                <p className='mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-300'>
-                  Browse and download Microsoft's Fluent UI icons and emojis in beautiful hand-drawn
-                  Excalidraw format. Perfect for wireframes, mockups, and design sketches.
-                </p>
-                <div className='mt-6 flex flex-wrap justify-center gap-4 text-sm text-gray-500 dark:text-gray-400'>
-                  <span className='flex items-center'>
-                    <span className='mr-2 h-2 w-2 rounded-full bg-primary-500'></span>
-                    5,980+ Icons
-                  </span>
-                  <span className='flex items-center'>
-                    <span className='mr-2 h-2 w-2 rounded-full bg-accent-500'></span>
-                    1,595+ Emojis
-                  </span>
-                  <span className='flex items-center'>
-                    <span className='mr-2 h-2 w-2 rounded-full bg-green-500'></span>
-                    Free to Use
-                  </span>
+        <div className='flex flex-1 overflow-scroll'>
+          {/* Sidebar */}
+          <Sidebar
+            categories={categories}
+            selectedCategory={selectedCategory}
+            onCategorySelect={handleCategorySelect}
+            showFavoritesOnly={showFavoritesOnly}
+            onToggleFavorites={handleToggleFavorites}
+            isOpen={sidebarOpen}
+            onClose={() => setSidebarOpen(false)}
+          />
+          {/* Main content area */}
+          <main className='flex-1 overflow-y-auto'>
+            <div className='mx-auto max-w-7xl px-4 py-6 pb-20 sm:px-6 lg:px-8'>
+              {/* Hero section */}
+              {!searchQuery && !selectedCategory && !showFavoritesOnly && (
+                <div className='mb-8 text-center'>
+                  <h1 className='mb-4 text-4xl font-bold text-gray-900 dark:text-gray-100'>
+                    <span className='text-gradient'>Fluent Jot</span>
+                  </h1>
+                  <p className='mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-300'>
+                    Browse and download Microsoft's Fluent UI icons and emojis in beautiful hand-drawn
+                    Excalidraw format. Perfect for wireframes, mockups, and design sketches.
+                  </p>
+                  <div className='mt-6 flex flex-wrap justify-center gap-4 text-sm text-gray-500 dark:text-gray-400'>
+                    <span className='flex items-center'>
+                      <span className='mr-2 h-2 w-2 rounded-full bg-primary-500'></span>
+                      5,980+ Icons
+                    </span>
+                    <span className='flex items-center'>
+                      <span className='mr-2 h-2 w-2 rounded-full bg-accent-500'></span>
+                      1,595+ Emojis
+                    </span>
+                    <span className='flex items-center'>
+                      <span className='mr-2 h-2 w-2 rounded-full bg-green-500'></span>
+                      Free to Use
+                    </span>
+                  </div>
                 </div>
-              </div>
-            )}
-
-            {/* Icon Browser */}
-            <IconBrowser
-              icons={icons}
-              emojis={emojis}
-              categories={categories}
-              searchFilters={searchFilters}
-              onStylesChange={handleStylesChange}
-              isLoading={isLoading}
-              error={error}
-            />
-          </div>
-        </main>
+              )}
+
+              {/* Icon Browser */}
+              <IconBrowser
+                icons={icons}
+                emojis={emojis}
+                categories={categories}
+                searchFilters={searchFilters}
+                onStylesChange={handleStylesChange}
+                isLoading={isLoading}
+                error={error}
+              />
+            </div>
+          </main>
+        </div>
+
       </div>
 
       {/* Fixed Footer */}

web/src/components/layout/Footer.tsx

@@ -12,7 +12,7 @@ export default function Footer({ onShowCookiePreferences }: FooterProps) {
     analytics.trackExternalLink(url, linkText);
   };
   return (
-    <footer className='fixed bottom-0 left-0 right-0 z-10 border-t border-gray-200 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-950/80'>
+    <footer className='fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/80 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-950/80'>
       <div className='mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8'>
         <div className='flex flex-col items-center justify-between gap-2 text-xs text-gray-500 dark:text-gray-400 sm:flex-row sm:gap-0'>
           <div className='flex flex-col items-center gap-1 sm:flex-row sm:gap-4'>

web/src/components/layout/Sidebar.tsx

@@ -50,13 +50,13 @@ export default function Sidebar({
     <>
       {/* Mobile overlay */}
       {isOpen && (
-        <div className='fixed inset-0 z-30 bg-black bg-opacity-25 md:hidden' onClick={onClose} />
+        <div className='fixed inset-0 z-40 bg-black bg-opacity-25 md:hidden' onClick={onClose} />
       )}
 
       {/* Sidebar */}
       <div
         className={clsx(
-          'fixed inset-y-0 left-0 z-40 w-64 transform overflow-y-auto border-r border-gray-200 bg-white transition-transform duration-300 ease-in-out dark:border-gray-700 dark:bg-gray-900 md:relative md:translate-x-0',
+          'fixed inset-y-0 left-0 z-10 mb-4 w-64 transform overflow-y-auto border-r border-gray-200 bg-white transition-transform duration-300 ease-in-out dark:border-gray-700 dark:bg-gray-900 md:relative md:translate-x-0',
           isOpen ? 'translate-x-0' : '-translate-x-full'
         )}
       >