Merge pull request #95 from frontChapter/fix-overflow-x

fix overflow x

Author: AmirHosseinKarimi

package.json

@@ -25,7 +25,6 @@
     "react-dom": "^18",
     "react-icons": "^5.0.1",
     "recoil": "^0.7.7",
-    "sass": "^1.70.0",
     "server-only": "^0.0.1",
     "sharp": "^0.33.2",
     "swiper": "^11.0.5",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 import { TSpeakerCard } from "@/types/home/speakerCard.type";
 import Image from "next/image";
 import SpeakerSocials from "./SpeakerSocials";
-import styles from "./styles.module.scss";
+import styles from "./styles.module.css";
 
 const SpeakerCard = ({
   avatar,

src/app/components/Speakers/SpeakerCard.tsx

@@ -0,0 +1,6 @@
+.speakersSection {
+  @apply relative py-6 lg:pb-44 lg:pt-12;
+  &::before {
+    @apply bg-none lg:absolute lg:inset-0 lg:w-full lg:bg-[url("/images/speakers\_lines.svg")] lg:bg-contain lg:bg-bottom lg:bg-no-repeat lg:content-["_"];
+  }
+}

src/app/components/Speakers/Speakers.styles.module.css

@@ -2,7 +2,7 @@ import { speakersData } from "@/data/speakersData";
 import { Fragment } from "react";
 import { RiMicLine } from "react-icons/ri";
 import SpeakerCard from "./SpeakerCard";
-import styles from "./Speakers.styles.module.scss";
+import styles from "./Speakers.styles.module.css";
 
 export default function Speakers() {
   return (

src/app/components/Speakers/Speakers.styles.module.scss

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import styles from "./Timeline.styles.module.scss";
+import styles from "./Timeline.styles.module.css";
 import { TimelineItemType } from "./Timeline.types";
 import { confDayTimeline, nightTimeline } from "./data";
 

src/app/components/Speakers/Speakers.tsx

@@ -5,3 +5,22 @@
 html {
   scroll-behavior: smooth;
 }
+
+body {
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #333;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 8px;
+
+    &:hover {
+      background: #dadada;
+    }
+  }
+}