auto-fill folder list using css grid

src/components/FolderView/FolderList.vue

@@ -41,8 +41,9 @@ export default {
 }
 
 #f-items {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-gap: 1rem;
   border-top: 1px solid var(--separator);
   gap: 1rem;
   padding-top: 1rem;
@@ -56,7 +57,6 @@ export default {
 }
 
 .f-container .f-item {
-  min-width: 13rem;
   min-height: 5rem;
   display: flex;
   align-items: center;

src/components/RightSideBar/Search.vue

@@ -123,7 +123,7 @@ export default {
         icon: "📁",
       },
       {
-        title: "🈁 this page",
+        title: "🈁 ここ",
         icon: "🈁",
       },
     ];
@@ -198,15 +198,6 @@ export default {
   background-color: #131313b2;
   overflow: hidden;
 
-  .input {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .filter {
-      display: flex;
-      margin-left: 3rem;
-
   .item {
     position: relative;
     background-color: rgb(39, 37, 37);
@@ -219,6 +210,20 @@ export default {
 
     &:hover {
       background-color: rgb(170, 50, 50);
+    }
+  }
+
+  .input {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .filter {
+      display: flex;
+      margin-left: 3rem;
+
+      .item {
+        &:hover {
           width: 4rem;
 
           .cancel {
@@ -250,7 +255,6 @@ export default {
 
   .v00 {
     opacity: 1;
-    max-height: 3rem;
     transition: all 0.2s ease-in;
   }
 
@@ -261,17 +265,6 @@ export default {
     position: absolute;
     right: 0;
 
-    .item {
-      cursor: pointer;
-      background-color: rgb(75, 70, 70);
-      padding: $small;
-      border-radius: $small;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
     .item::before {
       content: "#";
       color: grey;
@@ -283,17 +276,10 @@ export default {
   display: flex;
 
   .item {
-    background-color: rgb(39, 37, 37);
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
     margin: $small;
+  }
+}
 
-    &:hover {
-      background-color: rgb(170, 50, 50);
-    }
-  }
-}
 .right-search .scrollable {
   height: 26rem;
   overflow-y: scroll;