fix: add basic responsiveness

Author: cmgriffing

playgrounds/app/package.json

@@ -23,6 +23,7 @@
     "@fontsource/roboto": "^5.1.0",
     "@kobalte/core": "^0.13.7",
     "@libsql/client": "^0.14.0",
+    "@solid-primitives/media": "^2.2.9",
     "@solid-primitives/storage": "^4.2.1",
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.14.7",

playgrounds/app/src/app.css

@@ -102,9 +102,7 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      'rlig' 1,
-      'calt' 1;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
   }
 }
 
@@ -148,3 +146,27 @@
 #app {
   @apply min-h-screen flex flex-col;
 }
+
+.collapsible__content {
+  overflow: hidden;
+  animation: slideUp 300ms ease-out;
+}
+.collapsible__content[data-expanded] {
+  animation: slideDown 300ms ease-out;
+}
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}