ignore: share

packages/web/src/components/share.module.css

@@ -1,9 +1,14 @@
 .root {
-  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   line-height: 1;
+  padding: 1.5rem;
+
+  @media (max-width: 30rem) {
+    padding: 1rem;
+    gap: 2rem;
+  }
 
   --sm-tool-width: 28rem;
   --md-tool-width: 40rem;
@@ -48,18 +53,17 @@
 .header {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
 
   @media (max-width: 30rem) {
     gap: 1rem;
   }
 
   [data-section="title"] {
-
     h1 {
-      font-size: 1.75rem;
+      font-size: 2.75rem;
       font-weight: 500;
-      line-height: 1.25;
+      line-height: 1.15;
       letter-spacing: -0.05em;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -67,7 +71,8 @@
       overflow: hidden;
 
       @media (max-width: 30rem) {
-        font-size: 1.25rem;
+        font-size: 1.75rem;
+        line-height: 1.25;
         -webkit-line-clamp: 3;
       }
     }
@@ -76,7 +81,7 @@
   [data-section="row"] {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
+    gap: 0.5rem;
   }
 
   [data-section="stats"] {
@@ -308,9 +313,9 @@
       span:first-child {
         flex: 0 0 auto;
         display: block;
-        margin: 1px;
-        width: 16px;
-        height: 16px;
+        margin: 2px;
+        width: 14px;
+        height: 14px;
         border-radius: 50%;
         background-color: var(--sl-color-divider);
 
@@ -488,12 +493,13 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.5rem;
+  width: 100%;
+  max-width: var(--sm-tool-width);
 
   & > [data-section="body"] {
-    width: var(--sm-tool-width);
+    width: 100%;
     border: 1px solid var(--sl-color-divider);
     border-radius: 0.25rem;
-    max-width: 100%;
 
     [data-section="header"] {
       position: relative;
@@ -611,7 +617,8 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
-  width: var(--sm-tool-width);
+  width: 100%;
+  max-width: var(--sm-tool-width);
   border: 1px solid var(--sl-color-divider);
   border-radius: 0.25rem;