feat: Improve docs-site mobile responsiveness

Fix code block overflow issues and enhance mobile experience:

CodeBlock improvements:
- Add max-width: 100% to prevent overflow
- Extend code blocks to screen edges on mobile
- Reduce font sizes on small screens (0.8125rem -> 0.75rem)
- Adjust line numbers spacing for mobile
- Ensure proper horizontal scrolling when needed

Alert component:
- Reduce padding and font sizes on mobile
- Adjust icon sizes for smaller screens

Global improvements:
- Prevent horizontal scrolling (overflow-x: hidden)
- Make images and tables responsive
- Better text wrapping (word-wrap, overflow-wrap)
- Responsive font sizes for headings (480px - 768px)

Home page:
- Stack hero buttons vertically on mobile
- Reduce hero stats font sizes
- Adjust padding and spacing for small screens
- Responsive feature cards and icons

Author: mashrulhaque

docs-site/src/components/Alert/Alert.css

@@ -71,3 +71,24 @@
 .alert-error .alert-icon {
   color: var(--error);
 }
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+  .alert {
+    padding: 0.875rem 1rem;
+    margin: 1rem 0;
+    gap: 0.75rem;
+  }
+
+  .alert-icon {
+    font-size: 1.25rem;
+  }
+
+  .alert-message {
+    font-size: 0.875rem;
+  }
+
+  .alert-title {
+    font-size: 0.9375rem;
+  }
+}

docs-site/src/components/CodeBlock/CodeBlock.css

@@ -3,6 +3,7 @@
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  max-width: 100%;
 }
 
 .code-block-title {
@@ -21,6 +22,15 @@
   overflow-x: auto;
   font-size: 0.875rem;
   line-height: 1.7;
+  max-width: 100%;
+}
+
+/* Ensure code doesn't overflow */
+.code-block pre code {
+  display: block;
+  white-space: pre;
+  word-wrap: normal;
+  overflow-wrap: normal;
 }
 
 .code-block code {
@@ -83,3 +93,50 @@
 .code-block pre::-webkit-scrollbar-thumb:hover {
   background: #475569;
 }
+
+/* Mobile responsiveness */
+@media (max-width: 640px) {
+  .code-block {
+    margin: 1rem -1rem; /* Extend to edges on mobile */
+    border-radius: 0;
+  }
+
+  .code-block pre {
+    padding: 1rem;
+    font-size: 0.8125rem; /* Slightly smaller on mobile */
+  }
+
+  .code-block code {
+    font-size: 0.8125rem;
+  }
+
+  .code-block-title {
+    padding: 0.625rem 1rem;
+    font-size: 0.8125rem;
+  }
+
+  /* Adjust line numbers on mobile */
+  .code-block pre.line-numbers {
+    padding-left: 3rem;
+  }
+
+  .code-block pre.line-numbers .line-numbers-rows {
+    left: -3rem;
+    width: 2.5rem;
+  }
+
+  .code-block pre.line-numbers .line-numbers-rows > span:before {
+    padding-right: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .code-block pre {
+    padding: 0.875rem;
+    font-size: 0.75rem;
+  }
+
+  .code-block code {
+    font-size: 0.75rem;
+  }
+}

docs-site/src/index.css

@@ -104,6 +104,25 @@ li {
   background: var(--text-secondary);
 }
 
+/* Prevent horizontal scrolling */
+html, body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+/* Ensure images and tables are responsive */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+table {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   h1 {
@@ -117,4 +136,33 @@ li {
   h3 {
     font-size: 1.25rem;
   }
+
+  /* Better text wrapping on mobile */
+  p, li {
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* Adjust padding for mobile */
+  ul, ol {
+    padding-left: 1.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.375rem;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+  }
+
+  body {
+    font-size: 0.9375rem;
+  }
 }

docs-site/src/pages/Home.css

@@ -283,6 +283,18 @@
     align-items: stretch;
   }
 
+  .btn {
+    justify-content: center;
+  }
+
+  .hero-stats {
+    gap: 2rem;
+  }
+
+  .stat-value {
+    font-size: 2rem;
+  }
+
   .step {
     flex-direction: column;
   }
@@ -291,4 +303,62 @@
   .next-steps-grid {
     grid-template-columns: 1fr;
   }
+
+  .feature-card,
+  .next-step-card {
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .hero {
+    padding: 2rem 0 3rem;
+  }
+
+  .hero-title {
+    font-size: 1.75rem;
+  }
+
+  .hero-description {
+    font-size: 1rem;
+  }
+
+  .hero-badge {
+    font-size: 0.8125rem;
+    padding: 0.375rem 1rem;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.9375rem;
+  }
+
+  .hero-stats {
+    gap: 1.5rem;
+  }
+
+  .stat-value {
+    font-size: 1.75rem;
+  }
+
+  .stat-label {
+    font-size: 0.8125rem;
+  }
+
+  .section {
+    margin: 2.5rem 0;
+  }
+
+  .feature-card,
+  .next-step-card {
+    padding: 1.25rem;
+  }
+
+  .feature-icon {
+    font-size: 2rem;
+  }
+
+  .next-step-icon {
+    font-size: 1.75rem;
+  }
 }