fix mobile layout tab pds select

src/web/components/mode-tabs.ts

@@ -38,14 +38,14 @@ export function renderModeTabs(handle: string, activeTab: 'blog' | 'browser' | '
     tabs += `<a href="/@${handle}/at/link" class="tab ${activeTab === 'link' ? 'active' : ''}">link</a>`
   }
 
-  tabs += `
+  const pdsSelector = `
     <div class="pds-selector" id="pds-selector">
       <button type="button" class="tab" id="pds-tab">pds</button>
       <div class="pds-dropdown" id="pds-dropdown"></div>
     </div>
   `
 
-  return `<div class="mode-tabs">${tabs}</div>`
+  return `<div class="mode-tabs"><div class="tabs-scroll">${tabs}</div>${pdsSelector}</div>`
 }
 
 // Render language selector (above content)

src/web/styles/main.css

@@ -282,13 +282,21 @@ body {
   display: flex;
   gap: 4px;
   margin-bottom: 16px;
+  align-items: center;
+}
+
+.tabs-scroll {
+  display: flex;
+  gap: 4px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  flex: 1;
+  min-width: 0;
 }
 
-.mode-tabs::-webkit-scrollbar {
+.tabs-scroll::-webkit-scrollbar {
   display: none;
 }
 
@@ -331,7 +339,7 @@ body {
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   min-width: 180px;
-  z-index: 100;
+  z-index: 1000;
   overflow: hidden;
 }