From 0f09fecfa2eda5212cf74b0e1d4f4d0bd1e688b4 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Tue, 27 Oct 2026 15:23:44 -0400
Subject: [PATCH] Fix #3950

---
 .../public/ProxyResourceTargetsForm.tsx       | 47 ++++++++++---------
 .../PolicyAccessRulesSection.tsx              |  6 ++-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx b/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
index 04a92ace6..482cbc97e 100644
--- a/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
+++ b/src/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm.tsx
@@ -40,6 +40,7 @@ import type { ResourceContextType } from "@app/contexts/resourceContext";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
 import { DockerManager, DockerState } from "@app/lib/docker";
 import { orgQueries, resourceQueries, aiProviderQueries } from "@app/lib/queries";
@@ -959,28 +960,32 @@ export const ProxyResourceTargetsForm = forwardRef<
                     </TableBody>
                 </Table>
             </div>
-            {hasTargets && (
-                <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center justify-between w-full gap-2">
-                        {addTargetButton}
-                        {!disableAdvancedMode && (
-                            <div className="flex items-center gap-2">
-                                <Switch
-                                    id={advancedModeToggleId}
-                                    checked={isAdvancedMode}
-                                    onCheckedChange={setIsAdvancedMode}
-                                />
-                                <label
-                                    htmlFor={advancedModeToggleId}
-                                    className="text-sm"
-                                >
-                                    {t("advancedMode")}
-                                </label>
-                            </div>
-                        )}
-                    </div>
+            {/* The empty state (and its add button) is hidden on mobile, so always show the add button there */}
+            <div
+                className={cn(
+                    "flex items-center justify-between mb-4",
+                    !hasTargets && "sm:hidden"
+                )}
+            >
+                <div className="flex items-center justify-between w-full gap-2">
+                    {addTargetButton}
+                    {hasTargets && !disableAdvancedMode && (
+                        <div className="flex items-center gap-2">
+                            <Switch
+                                id={advancedModeToggleId}
+                                checked={isAdvancedMode}
+                                onCheckedChange={setIsAdvancedMode}
+                            />
+                            <label
+                                htmlFor={advancedModeToggleId}
+                                className="text-sm"
+                            >
+                                {t("advancedMode")}
+                            </label>
+                        </div>
+                    )}
                 </div>
-            )}
+            </div>
             {build === "saas" &&
                 !isAiProvider &&
                 targets.length > 1 &&
diff --git a/src/components/resource-policy/PolicyAccessRulesSection.tsx b/src/components/resource-policy/PolicyAccessRulesSection.tsx
index bd735f9b5..ea12e9bef 100644
--- a/src/components/resource-policy/PolicyAccessRulesSection.tsx
+++ b/src/components/resource-policy/PolicyAccessRulesSection.tsx
@@ -37,6 +37,7 @@ import {
 import { UseFormReturn, useForm, useWatch } from "react-hook-form";
 import { useResourcePolicyContext } from "@app/providers/ResourcePolicyProvider";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { resourceQueries } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
@@ -174,7 +175,10 @@ function PolicyAccessRulesSectionLayout({
                                 resourceOverlayMode={resourceOverlayMode}
                                 emptyStateAction={addRuleButton}
                             />
-                            {hasRules && addRuleButton}
+                            {/* The empty state (and its add button) is hidden on mobile, so always show the add button there */}
+                            <div className={cn(!hasRules && "sm:hidden")}>
+                                {addRuleButton}
+                            </div>
                         </>
                     )}
                 </div>