feat: ajust responsive UI

src/components/Genre.module.css

@@ -1,21 +1,14 @@
 .item {
   width: rem(90px);
   height: rem(90px);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: var(--mantine-spacing-xs);
   transition: background-color 0.2s;
-
-  [data-mantine-color-scheme="light"] & {
-    background-color: var(--mantine-color-gray-0);
-  }
-
-  [data-mantine-color-scheme="light"] & {
-    background-color: var(--mantine-color-dark-6);
-  }
 }
 
 .text {

src/components/Header.module.css

@@ -4,6 +4,6 @@
     position: sticky;
     top: 0;
     backdrop-filter: blur(8px);
-    z-index: 4;
+    z-index: 5;
     padding: rem(16px);
 }

src/components/Main.module.css

@@ -1,13 +1,12 @@
 .main {
   flex: 1;
-  padding: rem(16px) rem(20px) rem(24px);
+  padding: rem(80px) rem(20px);
 
   @media (max-width: $mantine-breakpoint-xs) {
     min-height: calc(100vh - rem(128px));
   }
 
-  @media (min-width: rem(640px)) {
-    padding-right: rem(28px);
-    padding-left: rem(28px);
+  @media (min-width: $mantine-breakpoint-md) {
+    padding: rem(16px) rem(28px) rem(24px);
   }
 }

src/components/MobilePlayer.tsx

@@ -45,7 +45,10 @@ const ButtonOpenDrawer = memo(() => {
 
   return (
     <>
-      <ActionIcon onClick={() => setOpen((state) => !state)}>
+      <ActionIcon
+        color="transparent"
+        onClick={() => setOpen((state) => !state)}
+      >
         <IconChevronUp size={18} />
       </ActionIcon>
       <Drawer

src/containers/MobileNavigation.module.css

@@ -1,6 +1,7 @@
 .container {
-    position: sticky;
+    position: absolute;
     bottom: 0;
+    width: 100%;
     background: light-dark(rgba(231, 245, 255, 0.8), rgba(25, 113, 194, 0.2));
     backdrop-filter: blur(8px);
     z-index: 4;