product-card

assets/scss/main.scss

@@ -28,3 +28,33 @@ h3 {
 button {
   cursor: pointer;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.7);
+  background-clip: padding-box;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+}
+
+body {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}

components/ProductDescription.vue

@@ -77,15 +77,19 @@ const items = computed(() => [
 
 <style lang="scss">
 .product-description {
+  width: 100%;
+  max-width: 335px;
+
+  @media (min-width: 768px) {
     position: sticky;
     align-self: self-start;
     top: 40px;
     overflow-y: auto;
-  width: 335px;
+    max-height: calc(100vh - 80px);
+  }
 
   padding-top: 30px;
   padding-inline: 30px;
-
   display: flex;
   flex-direction: column;
   gap: 10px;