Merge pull request #164 from uidotdev/lf/responsive-fixes

Responsive fixes

Author: benadam11

usehooks.com/src/components/HookDescription.astro

@@ -43,7 +43,7 @@ const { name } = Astro.props;
   }
 
   .callout {
-    margin-top: 1rem;
+    margin: 1rem 0 1.5rem;
     align-self: start;
     padding: 1.5rem;
     padding-bottom: 0;
@@ -76,6 +76,7 @@ const { name } = Astro.props;
   @media screen and (min-width: 811px) {
     .callout {
       max-width: var(--callout-width);
+      margin-bottom: 0;
     }
   }
 </style>

usehooks.com/src/components/Install.astro

@@ -45,14 +45,15 @@ const { class: className } = Astro.props;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 2rem;
+    gap: clamp(.7rem, 3vw, 2rem);
     background-color: var(--charcoal);
-    padding: 1.3rem 1.5rem;
+    padding: clamp(1rem, 4vw, 1.3rem) clamp(1rem, 4vw, 1.5rem);
     border-radius: 0.5rem;
   }
 
   .install code {
     margin-top: 0.3rem;
+    padding: 0;
     font-size: clamp(0.8rem, 3vw, 1.2rem) !important;
   }
 

usehooks.com/src/pages/[hook].astro

@@ -92,7 +92,7 @@ const installSnippet = experimental
     }
 
     section {
-      padding: calc(var(--body-padding) * 1.6);
+      padding: clamp(.5rem, 4vw, 3rem);
       padding-top: 0;
       display: flex;
       flex-direction: column;
@@ -122,7 +122,7 @@ const installSnippet = experimental
       color: var(--blue);
       text-transform: none;
       font-family: var(--font-outfit);
-      font-size: clamp(1.8rem, 5vw, 2.6rem);
+      font-size: clamp(1.6rem, 5vw, 2.6rem);
       font-weight: 600;
     }
 
@@ -151,6 +151,13 @@ const installSnippet = experimental
       margin-bottom: 1rem;
     }
 
+    @media screen and (max-width: 500px) {
+      .experimental ~ .install {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
     :global(.reference) {
       font-size: clamp(1.1rem, 2.2vw, 1.3rem);
     }
@@ -166,6 +173,7 @@ const installSnippet = experimental
     :global(.reference .table-container) {
       width: 100%;
       overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
       border: 0.07rem solid rgba(249, 244, 218, 0.1);
     }