From 24ea76e753c1d328872db26f5d7c5130e5b5a7ef Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 19 Sep 2024 06:19:16 -0700
Subject: [PATCH] Better native app styling. Hopefully this fixes the issue!
 Fixes #97

---
 src-web/components/ResponsePane.tsx |  1 +
 src-web/components/core/Stacks.tsx  |  2 +-
 src-web/main.css                    | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index c1a8b9f8..f5b2829d 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/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"
               >
diff --git a/src-web/components/core/Stacks.tsx b/src-web/components/core/Stacks.tsx
index 6aca28bc..ce741626 100644
--- a/src-web/components/core/Stacks.tsx
+++ b/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';
diff --git a/src-web/main.css b/src-web/main.css
index 48cd0e5b..590fd69c 100644
--- a/src-web/main.css
+++ b/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;
   }