😅 navbar text wrapping fixed

yuancong-liu · Apr 25, 2024 · 5933122 · 5933122
1 parent 3a0ea3b
commit 5933122
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/components/common/navBar/index.module.scss b/src/components/common/navBar/index.module.scss
@@ -25,8 +25,9 @@
     top: unset;
     bottom: 0;
     width: fit-content;
+    max-width: calc(100% - 16px);
     padding: 8px;
-    font-size: 12px;
+    font-size: 10px;
   }
 
   &::after {
@@ -108,7 +109,7 @@
 }
 
 .c-mark-nav {
-  height: 32px;
+  @extend %center-items-grid;
 
   .stroke {
     stroke: #fff;
@@ -130,3 +131,26 @@
     text-shadow: 0 0 10px utils.$color-navy;
   }
 }
+
+.icon-link {
+  @extend %center-items-grid;
+
+  width: 28px;
+  height: 28px;
+
+  @include sp {
+    width: 20px;
+    height: 20px;
+  }
+
+  > svg {
+    max-width: 28px;
+    max-height: 28px;
+    object-fit: cover;
+
+    @include sp {
+      max-width: 20px;
+      max-height: 20px;
+    }
+  }
+}
diff --git a/src/components/common/navBar/index.tsx b/src/components/common/navBar/index.tsx
@@ -102,7 +102,7 @@ export const NavBar = () => {
         </li>
 
         <li className={styles['c-mark-nav']}>
-          <Link href="/">
+          <Link href="/" className={styles['icon-link']}>
             <svg
               width="32"
               height="30"