Refactor EmailList component for improved layout and responsiveness. Adjusted class names for better styling and updated the MailFolderStackIndicator positioning to enhance visibility in listToolbarMode.

components/gmail/email-list.tsx

@@ -3080,7 +3080,8 @@ export function EmailList({
           !splitView && isViewMode && openEmail
             ? "relative flex min-h-0 flex-1 flex-col overflow-hidden"
             : mainScrollClass,
-          "relative min-h-0 flex-1 overscroll-y-none max-sm:pb-16"
+          "relative min-h-0 flex-1 overscroll-y-none max-sm:pb-16",
+          listToolbarMode && "sm:pb-12"
         )}
       >
       {listToolbarMode && (
@@ -4526,14 +4527,16 @@ export function EmailList({
       </div>
       </div>
       {listToolbarMode ? (
-        <div className="hidden w-fit max-w-full shrink-0 self-start sm:block">
+        <div className="pointer-events-none absolute bottom-0 left-0 z-20 hidden max-w-full sm:block">
-          <MailFolderStackIndicator
+          <div className="pointer-events-auto w-fit max-w-full">
-            currentKey={mailNavVisitKey(selectedFolder, inboxTab)}
+            <MailFolderStackIndicator
-            folderTree={sidebarNav.folderTree}
+              currentKey={mailNavVisitKey(selectedFolder, inboxTab)}
-            folderIdToLabel={sidebarNav.folderIdToLabel}
+              folderTree={sidebarNav.folderTree}
-            labelRows={sidebarNav.labelRows}
+              folderIdToLabel={sidebarNav.folderIdToLabel}
-            onNavigate={handleBreadcrumbNavigate}
+              labelRows={sidebarNav.labelRows}
-          />
+              onNavigate={handleBreadcrumbNavigate}
+            />
+          </div>
         </div>
       ) : null}
       </div>