share collapse system prompt

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

@@ -8,19 +8,6 @@
   --term-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2016'%20preserveAspectRatio%3D'xMidYMid%20meet'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'8'%20r%3D'8'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'8'%20r%3D'8'%2F%3E%3C%2Fsvg%3E");
 }
 
-[data-element-button-text] {
-  cursor: pointer;
-  appearance: none;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  color: var(--sl-color-text-secondary);
-
-  &:hover {
-    color: var(--sl-color-text);
-  }
-}
-
 [data-element-button-text] {
   cursor: pointer;
   appearance: none;
@@ -59,13 +46,18 @@
   flex-direction: column;
   gap: 0.75rem;
 
+  @media (max-width: 30rem) {
+    gap: 1rem;
+  }
+
   [data-section="title"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
+    gap: 3rem;
 
     & > div {
+      flex: 0 0 auto;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
@@ -127,6 +119,11 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+
+    @media (max-width: 30rem) {
+      font-size: 1.25rem;
+      -webkit-line-clamp: 3;
+    }
   }
 
   [data-section="stats"] {
@@ -163,10 +160,34 @@
       }
 
       span[data-stat-model] {
-        color: var(sl-color-text);
+        color: var(--sl-color-text);
       }
     }
   }
+  [data-section="system-prompt"] {
+    display: flex;
+    gap: 0.3125rem;
+
+    [data-section="icon"] {
+      flex: 0 0 auto;
+      color: var(--sl-color-text-dimmed);
+      opacity: 0.85;
+      svg {
+        display: block;
+      }
+    }
+
+    [data-section="content"] {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    button {
+      line-height: 1rem;
+      font-size: 0.875rem;
+    }
+  }
 }
 
 .parts {