fix: optimize toolbar layout on small screen (#41)

secretflow · Mar 27, 2024 · e01c91c · e01c91c
1 parent 52fb30d
commit e01c91c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/packages/secretnote/src/modules/layout/index.less b/packages/secretnote/src/modules/layout/index.less
@@ -12,8 +12,33 @@
     padding: 24px;
   }
 
-  .libro-header-right {
-    padding-right: 12px;
+  .libro-view-top {
+    .libro-header-left {
+      width: 0;
+    }
+
+    .libro-header-center {
+      min-width: 620px; // at least 620px to show all buttons
+      padding-left: 72px; // centered according to cell width
+    }
+
+    .libro-header-right {
+      max-width: 100px;
+      padding-right: 12px;
+
+      .mana-toolbar-item {
+        margin: 0;
+
+        .libro-keybind-instructions-icon {
+          margin-top: 3px;
+        }
+
+        svg {
+          display: block !important;
+          margin: auto !important;
+        }
+      }
+    }
   }
 
   .libro-view-content {

diff --git a/packages/secretnote/src/modules/metrics/index.less b/packages/secretnote/src/modules/metrics/index.less
@@ -6,7 +6,6 @@
   margin: 0;
 
   .chat-icon {
-    margin-top: 12px;
     color: #7b7b7b;
     fill: none !important;
   }