chore: Update tab styling in HomeTab component

Author: winverse

apps/web/src/features/home/components/HomeTab/HomeTab.module.css

@@ -19,65 +19,67 @@
   position: relative;
   height: 48px;
   user-select: none;
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: gold;
 
-  .tab {
+  & > a {
     display: flex;
-    position: relative;
-
-    & a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      text-decoration: none;
-      white-space: nowrap;
-      color: var(--text3);
-
-      &.active {
-        color: var(--text1);
-        font-weight: bold;
-      }
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--text3);
 
-      & svg {
-        font-size: 24px;
-        margin-right: 8px;
-      }
+    &.active {
+      color: var(--text1);
+      font-weight: bold;
+    }
 
-      @media screen and (max-width: 768px) {
-        & svg {
-          font-size: 18px;
-        }
-      }
+    & svg {
+      font-size: 24px;
+      margin-right: 8px;
+    }
 
-      @media screen and (max-width: 425px) {
-        & svg {
-          font-size: 16px;
-        }
+    @media screen and (max-width: 768px) {
+      & svg {
+        font-size: 18px;
       }
     }
 
-    & a + a {
-      margin-left: 20px;
-      @media screen and (max-width: 768px) {
-        margin-left: 8px;
+    @media screen and (max-width: 425px) {
+      & svg {
+        font-size: 16px;
       }
+    }
+  }
 
-      @media screen and (max-width: 425px) {
-        margin-left: 5px;
-      }
+  & a + a {
+    margin-left: 20px;
+    @media screen and (max-width: 768px) {
+      margin-left: 8px;
     }
 
-    .indicator {
-      position: absolute;
-      width: 32%;
-      height: 2px;
-      background: var(--border1);
-      bottom: -10px;
+    @media screen and (max-width: 425px) {
+      margin-left: 5px;
+    }
+  }
 
-      @media screen and (max-width: 430px) {
-        width: 34%;
-        margin-left: 3px;
-      }
+  .indicator {
+    position: absolute;
+    width: 32%;
+    height: 2px;
+    background: var(--border1);
+    bottom: -10px;
+
+    @media screen and (max-width: 430px) {
+      width: 34%;
+      margin-left: 3px;
     }
   }
 }