product-card

assets/scss/main.scss

@@ -27,4 +27,34 @@ h3 {
 // Buttons
 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 {
-  position: sticky;
-  align-self: self-start;
-  top: 40px;
-  overflow-y: auto;
-  width: 335px;
+  width: 100%;
+  max-width: 335px;
+
+  @media (min-width: 768px) {
+    position: sticky;
+    align-self: self-start;
+    top: 40px;
+    overflow-y: auto;
+    max-height: calc(100vh - 80px);
+  }
 
   padding-top: 30px;
   padding-inline: 30px;
-
   display: flex;
   flex-direction: column;
   gap: 10px;