From fa56d2717b8bcc91a0a2377354822adef287196d Mon Sep 17 00:00:00 2001
From: zmeyer44 <zmmeyer44@gmail.com>
Date: Wed, 25 Oct 2023 08:43:29 -0400
Subject: [PATCH] fixing modal and buttons textwrap

---
 app/(app)/(profile)/[npub]/page.tsx | 2 +-
 app/_providers/modal/index.tsx      | 4 +---
 app/_providers/modal/leaflet.tsx    | 4 ++--
 components/Modals/Template.tsx      | 2 +-
 components/ui/button.tsx            | 2 +-
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/(app)/(profile)/[npub]/page.tsx b/app/(app)/(profile)/[npub]/page.tsx
index 5aacb9a..4d7bf97 100644
--- a/app/(app)/(profile)/[npub]/page.tsx
+++ b/app/(app)/(profile)/[npub]/page.tsx
@@ -93,7 +93,7 @@ export default function ProfilePage({
               </div>
             )}
           </div>
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center justify-end gap-3">
             {currentUser?.pubkey === pubkey && !mySubscription && (
               <Button
                 onClick={() => modal?.show(<CreateSubecriptionTierModal />)}
diff --git a/app/_providers/modal/index.tsx b/app/_providers/modal/index.tsx
index 77fa5c8..feb398a 100644
--- a/app/_providers/modal/index.tsx
+++ b/app/_providers/modal/index.tsx
@@ -81,9 +81,7 @@ export default function Modal({
                     }
                   }}
                 >
-                  <div className="center max-h-[90vh] grow overflow-hidden">
-                    {children}
-                  </div>
+                  <div className="center grow overflow-hidden">{children}</div>
                 </motion.div>
               </FocusTrap>
               <motion.div
diff --git a/app/_providers/modal/leaflet.tsx b/app/_providers/modal/leaflet.tsx
index 5ad1e98..46f42c2 100644
--- a/app/_providers/modal/leaflet.tsx
+++ b/app/_providers/modal/leaflet.tsx
@@ -64,13 +64,13 @@ export default function Leaflet({
           <div className="-mr-1 h-1 w-6 rounded-full bg-muted transition-all group-active:rotate-12" />
           <div className="h-1 w-6 rounded-full bg-muted transition-all group-active:-rotate-12" />
         </div>
-        <div className="bottom-tabs scrollbar-muted-foreground max-h-[calc(95vh_-_28px)] w-full overflow-y-auto scrollbar-track-background">
+        <div className="bottom-tabs scrollbar-muted-foreground max-h-[calc(95vh_-_28px)] w-full overflow-y-auto pb-5 scrollbar-track-background">
           {children}
         </div>
       </motion.div>
       <motion.div
         key="leaflet-backdrop"
-        className="z-overlay fixed inset-0 bg-background/40 backdrop-blur"
+        className="fixed inset-0 z-overlay bg-background/40 backdrop-blur"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
diff --git a/components/Modals/Template.tsx b/components/Modals/Template.tsx
index 54547cb..cf84a1e 100644
--- a/components/Modals/Template.tsx
+++ b/components/Modals/Template.tsx
@@ -18,7 +18,7 @@ export default function Template({ title, children, className }: ModalProps) {
   return (
     <div
       className={cn(
-        "relative w-full grow bg-background p-4 shadow md:rounded-lg md:border md:p-6",
+        "relative max-h-full w-full grow bg-background p-4 shadow sm:max-h-[85vh] sm:overflow-y-auto md:rounded-lg md:border md:p-6",
         className,
       )}
     >
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 775d1fd..d9713b7 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import Spinner from "../spinner";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "relative inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "relative whitespace-nowrap inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {