fix: popup is hided in small screen

n1f2c3 · Oct 29, 2021 · 0950940 · 0950940
1 parent 3a8e54f
commit 0950940
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/content-scripts/renderer/popup/index.vue b/src/content-scripts/renderer/popup/index.vue
@@ -30,11 +30,15 @@ export default defineComponent({
       appExpanded.value = e as boolean;
       appWidth.value = e ? AppWidth.expanded : AppWidth.normal;
     });
-    const wrapperStyle = computed(() => ({
-      width: `${appWidth.value}px`,
-      "min-width": `${appWidth.value}px`,
-      transition: "1.0s",
-    }));
+    const wrapperStyle = computed(() => {
+      const maxWidth = window.innerWidth * 0.8;
+      const width = appWidth.value > maxWidth ? maxWidth : appWidth.value;
+      return {
+        width: `${width}px`,
+        "min-width": `${width}px`,
+        transition: "0.5s",
+      };
+    });
 
     const visible = ref(false);
     const handleClickOutside = () => {

diff --git a/src/content-scripts/renderer/popup/note-book/note.vue b/src/content-scripts/renderer/popup/note-book/note.vue
@@ -265,7 +265,7 @@ export default {
     text-align: left;
     text-overflow: ellipsis;
     overflow: hidden;
-    width: 400px;
+    width: auto;
     color: #409eff;
   }
   .note-link-content {
@@ -284,7 +284,7 @@ export default {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      width: 300px;
+      width: auto;
       position: relative;
       font-size: 14px;
 
@@ -298,6 +298,8 @@ export default {
       }
     }
     .note-time {
+      width: 100px;
+      min-width: 100px;
       text-align: right;
       user-select: none;
     }