ui enhancements

src/app/[orgId]/settings/(private)/idp/create/page.tsx

@@ -285,7 +285,7 @@ export default function Page() {
                 <Button
                     variant="outline"
                     onClick={() => {
-                        router.push("/admin/idp");
+                        router.push(`/${params.orgId}/settings/idp`);
                     }}
                 >
                     {t("idpSeeAll")}

src/app/[orgId]/settings/(private)/idp/page.tsx

@@ -1,17 +1,10 @@
-import { internal, priv } from "@app/lib/api";
+import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import IdpTable, { IdpRow } from "@app/components/private/OrgIdpTable";
 import { getTranslations } from "next-intl/server";
-import { Alert, AlertDescription } from "@app/components/ui/alert";
-import { cache } from "react";
-import {
-    GetOrgSubscriptionResponse,
-    GetOrgTierResponse
-} from "@server/routers/billing/types";
-import { TierId } from "@server/lib/billing/tiers";
-import { build } from "@server/build";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 
 type OrgIdpPageProps = {
     params: Promise<{ orgId: string }>;
@@ -35,21 +28,6 @@ export default async function OrgIdpPage(props: OrgIdpPageProps) {
 
     const t = await getTranslations();
 
-    let subscriptionStatus: GetOrgTierResponse | null = null;
-    try {
-        const getSubscription = cache(() =>
-            priv.get<AxiosResponse<GetOrgTierResponse>>(
-                `/org/${params.orgId}/billing/tier`
-            )
-        );
-        const subRes = await getSubscription();
-        subscriptionStatus = subRes.data.data;
-    } catch {}
-    const subscribed =
-        build === "enterprise"
-            ? true
-            : subscriptionStatus?.tier === TierId.STANDARD;
-
     return (
         <>
             <SettingsSectionTitle
@@ -57,13 +35,7 @@ export default async function OrgIdpPage(props: OrgIdpPageProps) {
                 description={t("idpManageDescription")}
             />
 
-            {build === "saas" && !subscribed ? (
-                <Alert variant="info" className="mb-6">
-                    <AlertDescription>
-                        {t("idpDisabled")} {t("subscriptionRequiredToUse")}
-                    </AlertDescription>
-                </Alert>
-            ) : null}
+            <PaidFeaturesAlert />
 
             <IdpTable idps={idps} orgId={params.orgId} />
         </>

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

@@ -338,7 +338,7 @@ function ProxyResourceTargetsForm({
                                 <div
                                     className={`flex items-center gap-2 ${status === "healthy" ? "text-green-500" : status === "unhealthy" ? "text-destructive" : ""}`}
                                 >
-                                    <Settings className="h-3 w-3" />
+                                    <Settings className="h-4 w-4 text-foreground" />
                                     {getStatusText(status)}
                                 </div>
                             </Button>

src/app/globals.css

@@ -178,4 +178,16 @@ p {
     .animate-dot-pulse {
         animation: dot-pulse 1.4s ease-in-out infinite;
     }
+
+    /* Use JavaScript-set viewport height for mobile to handle keyboard properly */
+    .h-screen-safe {
+        height: 100vh; /* Default for desktop and fallback */
+    }
+
+    /* Only apply custom viewport height on mobile */
+    @media (max-width: 767px) {
+        .h-screen-safe {
+            height: var(--vh, 100vh); /* Use CSS variable set by ViewportHeightFix on mobile */
+        }
+    }
 }

src/app/layout.tsx

@@ -22,6 +22,7 @@ import { TopLoader } from "@app/components/Toploader";
 import Script from "next/script";
 import { TanstackQueryProvider } from "@app/components/TanstackQueryProvider";
 import { TailwindIndicator } from "@app/components/TailwindIndicator";
+import { ViewportHeightFix } from "@app/components/ViewportHeightFix";
 
 export const metadata: Metadata = {
     title: `Dashboard - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -77,7 +78,7 @@ export default async function RootLayout({
 
     return (
         <html suppressHydrationWarning lang={locale}>
-            <body className={`${font.className} h-screen overflow-hidden`}>
+            <body className={`${font.className} h-screen-safe overflow-hidden`}>
                 <TopLoader />
                 {build === "saas" && (
                     <Script
@@ -86,6 +87,7 @@ export default async function RootLayout({
                         strategy="afterInteractive"
                     />
                 )}
+                <ViewportHeightFix />
                 <NextIntlClientProvider>
                     <ThemeProvider
                         attribute="class"