fixing modal and buttons textwrap

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 />)}

app/_providers/modal/index.tsx

@@ -81,9 +81,7 @@ export default function Modal({
                     }
                   }}
                 >
-                  <div className="center max-h-[90vh] grow overflow-hidden">
+                  <div className="center grow overflow-hidden">{children}</div>
-                    {children}
-                  </div>
                 </motion.div>
               </FocusTrap>
               <motion.div

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 }}

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,
       )}
     >

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: {