Better native app styling. Hopefully this fixes the issue!

Fixes #97

src-web/components/ResponsePane.tsx

@@ -117,6 +117,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
           >
             {activeResponse && (
               <HStack
+                as="p"
                 space={2}
                 className="whitespace-nowrap w-full pl-3 overflow-x-auto font-mono text-sm"
               >

src-web/components/core/Stacks.tsx

@@ -56,7 +56,7 @@ export const VStack = forwardRef(function VStack(
 });
 
 type BaseStackProps = HTMLAttributes<HTMLElement> & {
-  as?: ComponentType | 'ul' | 'label' | 'form';
+  as?: ComponentType | 'ul' | 'label' | 'form' | 'p';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center' | 'stretch' | 'end';
   justifyContent?: 'start' | 'center' | 'end' | 'between';

src-web/main.css

@@ -19,10 +19,18 @@
   }
 
   /* Disable user selection to make it more "app-like" */
-  :not(a),
-  :not(input):not(textarea),
-  :not(input):not(textarea)::after,
-  :not(input):not(textarea)::before {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  label,
+  code,
+  pre,
+  li {
     @apply select-none cursor-default;
   }