fix(website): improve mobile responsiveness (#554)

packages/website/src/components/landing/HeroSection.vue

@@ -267,11 +267,24 @@ onMounted(() => {
   border: 1px solid var(--border-color);
   border-radius: $radius-md;
   padding: 12px 20px;
+  max-width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 
   code {
     font-size: 14px;
     background: transparent;
     padding: 0;
+    white-space: nowrap;
+  }
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 10px 14px;
+    gap: 8px;
+
+    code {
+      font-size: 12px;
+    }
   }
 }
 

packages/website/src/components/landing/InstallSection.vue

@@ -62,6 +62,10 @@ function copyText(text: string) {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: $radius-lg;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 24px 16px;
+  }
 }
 
 .panel-title {
@@ -118,6 +122,8 @@ function copyText(text: string) {
   margin-bottom: 8px;
   cursor: pointer;
   transition: border-color $transition-fast;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 
   &:hover {
     border-color: var(--text-muted);
@@ -127,6 +133,7 @@ function copyText(text: string) {
     font-size: 14px;
     background: transparent;
     padding: 0;
+    white-space: nowrap;
   }
 }
 

packages/website/src/components/landing/PlatformsSection.vue

@@ -56,6 +56,10 @@ const platforms = [
   flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
+
+  @media (max-width: $breakpoint-mobile) {
+    gap: 16px;
+  }
 }
 
 .platform-item {
@@ -64,6 +68,11 @@ const platforms = [
   align-items: center;
   gap: 10px;
   width: 120px;
+
+  @media (max-width: $breakpoint-mobile) {
+    width: 80px;
+    gap: 6px;
+  }
 }
 
 .platform-icon {
@@ -86,11 +95,25 @@ const platforms = [
     width: 24px;
     height: 24px;
   }
+
+  @media (max-width: $breakpoint-mobile) {
+    width: 44px;
+    height: 44px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
 }
 
 .platform-name {
   font-size: 13px;
   color: var(--text-secondary);
   text-align: center;
+
+  @media (max-width: $breakpoint-mobile) {
+    font-size: 12px;
+  }
 }
 </style>

packages/website/src/components/landing/ScreenshotsSection.vue

@@ -98,6 +98,12 @@ onUnmounted(() => {
   padding: 0 24px;
   margin-top: 48px;
   margin-bottom: 24px;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 0 12px;
+    margin-top: 32px;
+    margin-bottom: 16px;
+  }
 }
 
 .screenshots-inner {

packages/website/src/components/landing/StarHistorySection.vue

@@ -80,6 +80,10 @@ onMounted(async () => {
   border-radius: $radius-lg;
   display: flex;
   flex-direction: column;
+
+  @media (max-width: $breakpoint-mobile) {
+    padding: 24px 16px;
+  }
 }
 
 .panel-title {