From 3259495ffb47e6d5ac55a800cecda16d59d096d6 Mon Sep 17 00:00:00 2001
From: Veselov <nadar.veselov777@gmail.com>
Date: Thu, 4 Sep 2025 20:14:34 +0300
Subject: [PATCH] product-card

---
 assets/scss/main.scss             | 30 ++++++++++++++++++++++++++++++
 components/ProductDescription.vue | 16 ++++++++++------
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 11d95c8..5229a5b 100644
--- a/assets/scss/main.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/components/ProductDescription.vue b/components/ProductDescription.vue
index 699df0f..1024077 100644
--- a/components/ProductDescription.vue
+++ b/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;