🐛 fix: Fix Gallery "position: sticky" for mobile UI (#483)

Fix (#483) Add src/styles/mobile.ts for media queries
lobehub · Dec 10, 2023 · 44a04bd · 44a04bd
1 parent 4c16147
commit 44a04bd
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 2 deletions.
diff --git a/javascript/main.js b/javascript/main.js
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -15,6 +15,7 @@ import progress from './components/progress';
 import slider from './components/slider';
 import table from './components/table';
 import tabs from './components/tabs';
+import mobile from './mobile';
 import tokens from './tokens';
 
 const GlobalStyle = createGlobalStyle(({ theme }) => [
@@ -34,6 +35,7 @@ const GlobalStyle = createGlobalStyle(({ theme }) => [
   popup(theme),
   extensions(theme),
   lightboxModal(theme),
+  mobile(),
 ]);
 
 export default GlobalStyle;
diff --git a/src/styles/mobile.ts b/src/styles/mobile.ts
@@ -0,0 +1,46 @@
+import { css } from 'antd-style';
+
+export default () => css`
+  @media (max-width: 575px) {
+    #quicksettings {
+      > div,
+      > fieldset {
+        flex: 1 !important;
+        max-width: unset !important;
+      }
+    }
+
+    .tabs {
+      .tabitem,
+      .gradio-tabitem {
+        padding: 8px !important;
+      }
+
+      #img2img_results,
+      #txt2img_results,
+      #extras_results {
+        position: relative;
+        top: 0 !important;
+        width: 100%;
+
+        &.mobile {
+          margin-top: 8px;
+        }
+      }
+
+      [id$='_settings'] {
+        width: 100%;
+      }
+    }
+
+    #tab_settings {
+      #settings .tab-nav {
+        width: 35%;
+      }
+
+      .tabitem {
+        margin-left: 35%;
+      }
+    }
+  }
+`;