enhance(ui): improvements for the narrow screen

resources/css/shui.css

@@ -228,6 +228,10 @@ html[data-theme=dark] {
 
 div[data-radix-popper-content-wrapper] {
   @apply !z-[999];
+
+  &:has(> .repos-list) {
+    @apply !z-[var(--ls-z-index-level-5)];
+  }
 }
 
 .ui__dialog-overlay {

src/main/frontend/components/container.cljs

@@ -700,7 +700,7 @@
                                               [(:db/id (db/get-page page)) :page])]
                      (state/sidebar-add-block! current-repo db-id block-type)))
                  (reset! sidebar-inited? true))))
-           (when (state/mobile?)
+           (when (mobile-util/native-platform?)
              (state/set-state! :mobile/show-tabbar? true))
            state)}
   []

src/main/frontend/components/container.css

@@ -281,7 +281,7 @@
 }
 
 .cp__sidebar-left-layout {
-  @apply fixed top-0 left-0 w-[10px] z-[var(--ls-z-index-level-5)];
+  @apply fixed top-0 left-0 w-[10px] z-[var(--ls-z-index-level-4)];
 
   a {
     @apply opacity-80 hover:opacity-100 text-foreground;
@@ -319,7 +319,7 @@
   }
 
   &.is-open {
-    width: 100%;
+    @apply w-full h-full;
 
     .left-sidebar-inner {
       transform: translate3d(0, 0, 0);
@@ -440,12 +440,16 @@
 }
 
 .cp__sidebar-main-content {
-  width: 100%;
-  max-width: var(--ls-main-content-max-width);
-  flex: 1;
+  @apply w-full max-w-[var(--ls-main-content-max-width)] flex-1;
 
   .page {
-    @apply px-4;
+    @apply px-5 pt-4;
+  }
+
+  @screen sm {
+    .page {
+      @apply px-2 pt-0;
+    }
   }
 }
 

src/main/frontend/components/page.cljs

@@ -667,7 +667,7 @@
 
            (if (and whiteboard-page? (not sidebar?))
              [:div ((state/get-component :whiteboard/tldraw-preview) (:block/uuid page))] ;; FIXME: this is not reactive
-             [:div.relative.grid.gap-8.page-inner
+             [:div.relative.grid.gap-6.page-inner
               (when-not (or block? sidebar?)
                 [:div.flex.flex-row.space-between
                  (when (and (or (mobile-util/native-platform?) (util/mobile?)) (not db-based?))

src/main/frontend/mobile/index.css

@@ -1,20 +1,9 @@
 .cp__footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  padding: 10px 20px;
-  background-color: var(--ls-primary-background-color);
-  z-index: 10;
-  display: flex;
-  flex: 0 0 auto;
-  white-space: nowrap;
-  height: 80px;
-  align-items: flex-start;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
+  @apply fixed bottom-0 left-0 px-5 py-2.5 z-10 flex flex-auto whitespace-nowrap h-20 items-start
+  bg-[var(--ls-primary-background-color)];
 
   .bottom-action {
-    width: 23px;
-    height: 23px;
+    @apply w-6 h-6;
   }
 
   .ti, .timer {
@@ -22,87 +11,53 @@
   }
 
   .timer {
-    position: absolute;
-    left: 40px;
+    @apply absolute left-10;
   }
 }
 
 .action-bar {
-  position: fixed;
-  bottom: 100px;
-  height: 70px;
-  padding: 6px;
-  border-radius: 10px;
-  background-color: var(--ls-secondary-background-color);
-  overflow-x: overlay;
-  overflow-y: hidden;
-  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(27, 31, 35, 0.10) 0px 0px 0px 1px;
-  z-index: 100;
+  @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
+  shadow-md bg-[var(--ls-secondary-background-color)] z-[100];
 
   .action-bar-commands {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    width: 120%;
+    @apply relative flex justify-around w-[120%];
 
 
     .ti, .tie {
-      color: var(--ls-primary-text-color);
-      font-size: 23px;
-      opacity: 50%;
+      @apply text-[var(--ls-primary-text-color)] text-[23px] opacity-50;
     }
 
     .description {
-      color: var(--ls-primary-text-color);
-      font-size: 13px;
-      opacity: 60%;
+      @apply text-[var(--ls-primary-text-color)] text-[13px] opacity-60;
     }
 
     button {
-      padding: 5px 10px
+      @apply py-1 px-2;
     }
   }
 }
 
 #mobile-editor-toolbar {
-  position: fixed;
-  bottom: 0;
-  transition: bottom 260ms;
-  transition-timing-function: ease-out;
-  left: 0;
-  width: 100%;
-  z-index: 9999;
-  display: flex;
-  justify-content: space-between;
+  @apply fixed bottom-0 left-0 w-full z-[9999] flex justify-between;
 
   button {
     @apply flex items-center py-2 px-2;
   }
 
   .submenu {
-    @apply fixed left-0 bottom-0 w-full flex-row justify-evenly items-center z-10 bg-base-2;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
-    overflow-x: overlay;
-    overflow-y: hidden;
-    height: 40px;
-    display: none;
+    @apply fixed left-0 bottom-0 w-full flex-row justify-evenly items-center z-10 bg-base-2
+    hidden overflow-x-auto overflow-y-hidden h-5 border;
 
     &.show-submenu {
-      display: flex;
+      @apply flex;
     }
   }
 
   .toolbar-commands {
-    justify-content: space-between;
-    display: flex;
-    align-items: center;
-    overflow-x: overlay;
-    overflow-y: hidden;
-    overflow-scrolling: touch;
-    width: 95%;
+    @apply flex justify-between items-center w-[95%] overflow-y-hidden overflow-x-auto;
 
     &::-webkit-scrollbar {
-      height: 4px;
+      @apply h-1;
     }
   }
 
@@ -114,29 +69,23 @@
 
 html.is-native-ipad {
   .cp__footer {
-    height: 55px;
-    right: 0;
-    box-shadow: none;
-    flex: 1;
-    index: 0;
+    @apply h-[55px] right-0 shadow-none flex-1 z-0;
   }
 
   .action-bar {
-    width: 70%;
-    min-width: 550px;
+    @apply w-[70%] min-w-[550px];
 
     .action-bar-commands {
-      width: 100%;
+      @apply w-full;
     }
 
     @media (orientation: landscape) {
-      width: 50%;
+      @apply w-1/2;
     }
   }
 }
 
 html.is-native-iphone {
-
   .action-bar {
     left: 3%;
     right: 3%;

src/main/frontend/ui.css

@@ -55,7 +55,7 @@
 .ui__notifications {
   @apply fixed top-12 pointer-events-none w-full;
 
-  z-index: var(--ls-z-index-level-4);
+  z-index: var(--ls-z-index-level-5);
 
   &-content {
     @apply inset-0 flex items-end justify-center px-4 py-2