visual improvements

src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx

@@ -161,6 +161,7 @@ function MaintenanceSectionForm({
             </SettingsSectionHeader>
 
             <SettingsSectionBody>
+                <PaidFeaturesAlert tiers={tierMatrix.maintencePage} />
                 <SettingsSectionForm>
                     <Form {...maintenanceForm}>
                         <form
@@ -168,9 +169,6 @@ function MaintenanceSectionForm({
                             className="space-y-4"
                             id="maintenance-settings-form"
                         >
-                            <PaidFeaturesAlert
-                                tiers={tierMatrix.maintencePage}
-                            />
                             <FormField
                                 control={maintenanceForm.control}
                                 name="maintenanceModeEnabled"

src/components/Credenza.tsx

@@ -84,7 +84,7 @@ const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaContent
             className={cn(
-                "overflow-y-auto max-h-[100dvh] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:top-[clamp(1.5rem,12vh,200px)] md:translate-y-0",
+                "flex min-h-0 max-h-[100dvh] flex-col overflow-hidden md:top-[clamp(1.5rem,12vh,200px)] md:max-h-[calc(100vh-clamp(3rem,24vh,400px))] md:translate-y-0",
                 className
             )}
             {...props}
@@ -122,7 +122,10 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaHeader = isDesktop ? DialogHeader : SheetHeader;
 
     return (
-        <CredenzaHeader className={cn("-mx-6 px-6", className)} {...props}>
+        <CredenzaHeader
+            className={cn("shrink-0 -mx-6 px-6", className)}
+            {...props}
+        >
             {children}
         </CredenzaHeader>
     );
@@ -151,7 +154,7 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <div
             className={cn(
-                "px-0 mb-4 space-y-4 overflow-x-hidden min-w-0",
+                "min-h-0 min-w-0 flex-1 space-y-4 overflow-y-auto overflow-x-hidden px-0",
                 className
             )}
             {...props}
@@ -169,7 +172,7 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaFooter
             className={cn(
-                "mt-8 md:mt-0 -mx-6 md:-mb-4 px-6 py-4 border-t border-border gap-2 md:gap-0",
+                "mt-8 shrink-0 border-t border-border py-4 -mx-6 gap-2 px-6 bg-card md:mt-0 md:-mb-4 md:gap-0",
                 className
             )}
             {...props}

src/components/PathMatchRenameModal.tsx

@@ -14,6 +14,7 @@ import { Input } from "./ui/input";
 import { Button } from "./ui/button";
 import {
     Credenza,
+    CredenzaBody,
     CredenzaContent,
     CredenzaDescription,
     CredenzaFooter,
@@ -88,7 +89,7 @@ export function PathMatchModal({
                         {t("pathMatchModalDescription")}
                     </CredenzaDescription>
                 </CredenzaHeader>
-                <div className="grid gap-4">
+                <CredenzaBody className="grid gap-4 space-y-0">
                     <div className="grid gap-2">
                         <Label htmlFor="match-type">{t("pathMatchType")}</Label>
                         <Select value={matchType} onValueChange={setMatchType}>
@@ -122,7 +123,7 @@ export function PathMatchModal({
                             {getHelpText()}
                         </p>
                     </div>
-                </div>
+                </CredenzaBody>
                 <CredenzaFooter className="gap-2">
                     {/* {value?.path && (
                         )} */}
@@ -215,7 +216,7 @@ export function PathRewriteModal({
                         {t("pathRewriteModalDescription")}
                     </CredenzaDescription>
                 </CredenzaHeader>
-                <div className="grid gap-4">
+                <CredenzaBody className="grid gap-4 space-y-0">
                     <div className="grid gap-2">
                         <Label htmlFor="rewrite-type">
                             {t("pathRewriteType")}
@@ -257,7 +258,7 @@ export function PathRewriteModal({
                             {getHelpText()}
                         </p>
                     </div>
-                </div>
+                </CredenzaBody>
                 <CredenzaFooter className="gap-2">
                     {value?.rewritePath && (
                         <Button variant="outline" onClick={handleClear}>

src/components/UptimeAlertSection.tsx

@@ -73,9 +73,10 @@ export default function UptimeAlertSection({
     >(null);
     const [loading, setLoading] = useState(false);
 
-    const { data: alertRules, isLoading: alertRulesLoading } = useQuery(
+    const { data: alertRules, isLoading: alertRulesLoading } = useQuery({
-        orgQueries.alertRulesForSource({ orgId, siteId, resourceId })
+        ...orgQueries.alertRulesForSource({ orgId, siteId, resourceId }),
-    );
+        enabled: isPaid
+    });
 
     const { data: orgUsers = [] } = useQuery(orgQueries.users({ orgId }));
     const { data: orgRoles = [] } = useQuery(orgQueries.roles({ orgId }));
@@ -197,7 +198,7 @@ export default function UptimeAlertSection({
                         <div>
                             <SettingsSectionTitle>Uptime</SettingsSectionTitle>
                             <SettingsSectionDescription>
-                                Site availability over the last {days} days.
+                                Availability over the last {days} days
                             </SettingsSectionDescription>
                         </div>
                         {alertButton}