From be193b4e89583e061e6f9b4dbc2fa3a7d35f0c69 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 10 Mar 2026 16:10:39 +0100
Subject: [PATCH] Fix RLS policy editor buttons overflow at lower resolutions
 (#43594)

Fixes #42584

Before:
<img width="403" height="556" alt="Screenshot 2026-03-10 at 15 29 12"
src="https://github.com/user-attachments/assets/14142f2e-63aa-4a88-948a-1897c46a4d24"
/>

After:
<img width="403" height="556" alt="Screenshot 2026-03-10 at 15 29 37"
src="https://github.com/user-attachments/assets/d3724b81-a4a6-417b-9d4a-429cfea4063e"
/>

Note that in large resolutions, the buttons don't take as much space as
before:
<img width="575" height="456" alt="Screenshot 2026-02-26 at 11 01 11"
src="https://github.com/user-attachments/assets/2bbd39e4-7a4d-4217-8b21-9b21de55ad00"
/>
---
 .../Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
index 93fabbec636..c15b1c1983b 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
@@ -32,6 +32,7 @@ import {
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   Select_Shadcn_,
+  cn,
 } from 'ui'
 import { MultiSelectV2 } from 'ui-patterns/MultiSelectDeprecated/MultiSelectV2'
 
@@ -271,7 +272,7 @@ export const PolicyDetailsV2 = ({
                       form.setValue('command', value)
                       onUpdateCommand(value)
                     }}
-                    className={`grid grid-cols-10 gap-3 ${isEditing ? 'opacity-50' : ''}`}
+                    className={cn('flex flex-wrap gap-3', isEditing && 'opacity-50')}
                   >
                     {[
                       'select',
@@ -283,7 +284,7 @@ export const PolicyDetailsV2 = ({
                         value={x}
                         disabled={isEditing}
                         label={x.toLocaleUpperCase()}
-                        className={`col-span-2 w-auto ${isEditing ? 'cursor-not-allowed' : ''}`}
+                        className={cn('w-auto', isEditing && 'cursor-not-allowed')}
                       />
                     ))}
                   </RadioGroup_Shadcn_>