From e5d013dad6f928bd5020a75391f0aae5ab6be942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Bonnet?= <bonnet.rem@gmail.com>
Date: Wed, 13 Nov 2024 16:16:41 +0100
Subject: [PATCH] fix(ui): update dropdown, variable color, access modal,
 deployment rules (#1751)

* fix: ui dropdown and old menu

* fix: ui update deployment rules view

* fix: service-access-modal scroll
---
 .../cluster-action-toolbar.spec.tsx.snap      | 34 +++----
 .../environment-action-toolbar.spec.tsx.snap  | 26 +++---
 .../service-access-modal.tsx                  | 92 +++++++++----------
 .../service-action-toolbar.spec.tsx.snap      | 26 +++---
 .../__snapshots__/variable-list.spec.tsx.snap | 18 ++--
 .../src/lib/variable-list/variable-list.tsx   |  2 +-
 .../deployment-rule-item.tsx                  | 23 ++++-
 .../page-create-edit-deployment-rule.tsx      |  2 +-
 .../page-deployment-rules.tsx                 | 76 +++++++++------
 .../ui/breadcrumb-item/breadcrumb-item.tsx    |  2 +
 .../dropdown-menu/dropdown-menu.tsx           |  6 +-
 .../components/menu/menu-group/menu-group.tsx |  2 +-
 .../ui/src/lib/components/menu/menu.tsx       |  4 +-
 .../ui/src/lib/styles/components/menu.scss    |  2 +-
 14 files changed, 173 insertions(+), 142 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
index cdb499b9730..7cfff23e20f 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
@@ -107,7 +107,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -120,7 +120,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 relative"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 relative"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -133,7 +133,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
         Update
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -264,7 +264,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:r12:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -277,7 +277,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -290,7 +290,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         Access info
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -303,7 +303,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -316,7 +316,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -330,11 +330,11 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -465,7 +465,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
     <div
       aria-labelledby="radix-:r1p:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -478,7 +478,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -491,7 +491,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         Access info
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -504,7 +504,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         See audit logs
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -517,7 +517,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -531,11 +531,11 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
index fe0f68db64f..4174ed190d9 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -107,7 +107,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -120,7 +120,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         Redeploy
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -134,11 +134,11 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -256,7 +256,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:rv:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -269,7 +269,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/123/environment/3840068565336064/logs"
@@ -283,7 +283,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Logs
       </a>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/audit-logs/general?targetType=ENVIRONMENT&projectId=123&targetId=3840068565336064"
@@ -297,7 +297,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -310,7 +310,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -323,7 +323,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Export as Terraform
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -337,11 +337,11 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
index c5b9b5955b6..570401bfb60 100644
--- a/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
+++ b/libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx
@@ -204,56 +204,54 @@ export function ServiceAccessModal({ service, organizationId, projectId, onClose
                     : 'Qovery injects on every service of the environment a set of environment variables (called BUILT_IN) containing the connection parameters of this service. To match the variables naming convention within your code, create an alias. Below you can find the BUILT_IN env vars for this service and the aliases defined at environment level.'
                 }
               >
-                <div className="max-h-48 overflow-y-scroll">
-                  {isLoadingVariables ? (
-                    <div className="flex justify-center p-5">
-                      <LoaderSpinner className="w-5" />
-                    </div>
-                  ) : (
-                    <>
-                      {variables
-                        ?.filter(
-                          (v) =>
-                            v.service_id === service.id &&
-                            (v.scope === 'BUILT_IN' || v.aliased_variable?.scope === 'BUILT_IN')
-                        )
-                        ?.map((variable) => (
-                          <div
-                            key={variable.id}
-                            className="flex flex-col justify-center gap-1 border-b border-neutral-250 px-4 py-3 last:border-0"
-                          >
-                            <div className="flex items-center gap-2">
-                              <div className="flex items-center truncate">
-                                {variable.aliased_variable && (
-                                  <span className="mr-2 inline-flex h-5 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
-                                    ALIAS
+                {isLoadingVariables ? (
+                  <div className="flex justify-center p-5">
+                    <LoaderSpinner className="w-5" />
+                  </div>
+                ) : (
+                  <>
+                    {variables
+                      ?.filter(
+                        (v) =>
+                          v.service_id === service.id &&
+                          (v.scope === 'BUILT_IN' || v.aliased_variable?.scope === 'BUILT_IN')
+                      )
+                      ?.map((variable) => (
+                        <div
+                          key={variable.id}
+                          className="flex flex-col justify-center gap-1 border-b border-neutral-250 px-4 py-3 last:border-0"
+                        >
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center truncate">
+                              {variable.aliased_variable && (
+                                <span className="mr-2 inline-flex h-5 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
+                                  ALIAS
+                                </span>
+                              )}
+                              <span className="truncate text-sm font-medium text-neutral-400">{variable.key}</span>
+                              {variable.description && (
+                                <Tooltip content={variable.description}>
+                                  <span>
+                                    <Icon
+                                      iconName="circle-info"
+                                      iconStyle="regular"
+                                      className="ml-2 text-neutral-350"
+                                    />
                                   </span>
-                                )}
-                                <span className="truncate text-sm font-medium text-neutral-400">{variable.key}</span>
-                                {variable.description && (
-                                  <Tooltip content={variable.description}>
-                                    <span>
-                                      <Icon
-                                        iconName="circle-info"
-                                        iconStyle="regular"
-                                        className="ml-2 text-neutral-350"
-                                      />
-                                    </span>
-                                  </Tooltip>
-                                )}
-                              </div>
+                                </Tooltip>
+                              )}
                             </div>
-                            {variable.aliased_variable && (
-                              <div className="flex flex-row gap-1 text-xs text-neutral-350">
-                                <Icon iconName="arrow-turn-down-right" className="text-2xs text-neutral-300" />
-                                <span>{variable.aliased_variable.key}</span>
-                              </div>
-                            )}
                           </div>
-                        ))}
-                    </>
-                  )}
-                </div>
+                          {variable.aliased_variable && (
+                            <div className="flex flex-row gap-1 text-xs text-neutral-350">
+                              <Icon iconName="arrow-turn-down-right" className="text-2xs text-neutral-300" />
+                              <span>{variable.aliased_variable.key}</span>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                  </>
+                )}
               </SectionExpand>
             </Accordion.Root>
           </Tabs.Content>
diff --git a/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
index 8eb651cc193..6e52ef4a5fc 100644
--- a/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -107,7 +107,7 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-neutral-150 cursor-pointer hover:bg-neutral-150 text-neutral-400 relative"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-neutral-150 cursor-pointer hover:bg-neutral-150 text-neutral-400 relative"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -130,11 +130,11 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -252,7 +252,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:rv:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -265,7 +265,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/456/environment/789/logs/0/service-logs"
@@ -284,7 +284,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         target="_blank"
       >
         <div
-          class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+          class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
           data-orientation="vertical"
           data-radix-collection-item=""
           role="menuitem"
@@ -298,7 +298,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         </div>
       </a>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/audit-logs/general?targetId=0&targetType=HELM&projectId=123&environmentId=3840068565336064"
@@ -312,7 +312,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -325,7 +325,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         Copy identifiers
       </div>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/123/environment/3840068565336064/application/0/settings/general"
@@ -339,7 +339,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         Open settings
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -353,11 +353,11 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
       </div>
       <div
         aria-orientation="horizontal"
-        class="my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
+        class="my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600"
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
+        class="px-3 flex items-center h-8 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-red-50 data-[highlighted]:text-red-600 cursor-pointer hover:bg-red-50 text-red-600"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
index b575ee63492..e4226db111c 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
@@ -246,7 +246,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               13 days
@@ -355,7 +355,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               6 months
@@ -464,7 +464,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               2 months
@@ -670,7 +670,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               6 months
@@ -786,7 +786,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               10 months
@@ -993,7 +993,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               6 months
@@ -1250,7 +1250,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               2 days
@@ -1375,7 +1375,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               5 months
@@ -1484,7 +1484,7 @@ exports[`VariableList should match snapshot 1`] = `
             style="width: 12%;"
           >
             <span
-              class="text-xs text-neutral-300"
+              class="text-xs text-neutral-350"
               data-state="closed"
             >
               2 months
diff --git a/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx b/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
index 97d66682974..8b38358755f 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
+++ b/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
@@ -444,7 +444,7 @@ export function VariableList({
             <Tooltip
               content={variable.updated_at ? dateUTCString(variable.updated_at) : dateUTCString(variable.created_at)}
             >
-              <span className="text-xs text-neutral-300">
+              <span className="text-xs text-neutral-350">
                 {timeAgo(variable.updated_at ? new Date(variable.updated_at) : new Date(variable.created_at))} ago
               </span>
             </Tooltip>
diff --git a/libs/pages/environments/src/lib/ui/deployment-rule-item/deployment-rule-item.tsx b/libs/pages/environments/src/lib/ui/deployment-rule-item/deployment-rule-item.tsx
index 72d4614c1c3..4f22200d984 100644
--- a/libs/pages/environments/src/lib/ui/deployment-rule-item/deployment-rule-item.tsx
+++ b/libs/pages/environments/src/lib/ui/deployment-rule-item/deployment-rule-item.tsx
@@ -12,12 +12,23 @@ export interface DeploymentRuleItemProps {
   stopTime: string
   weekDays: string[]
   isLast: boolean
-  isLoading?: boolean
   removeDeploymentRule: (id: string) => void
+  isLoading?: boolean
+  noDragDrop?: boolean
 }
 
 export function DeploymentRuleItem(props: DeploymentRuleItemProps) {
-  const { id, name, startTime, stopTime, weekDays, isLast = false, isLoading = false, removeDeploymentRule } = props
+  const {
+    id,
+    name,
+    startTime,
+    stopTime,
+    weekDays,
+    isLast = false,
+    isLoading = false,
+    removeDeploymentRule,
+    noDragDrop = false,
+  } = props
   const [menuOpen, setMenuOpen] = useState(false)
   const { organizationId, projectId } = useParams()
 
@@ -84,9 +95,11 @@ export function DeploymentRuleItem(props: DeploymentRuleItemProps) {
       </div>
       <Skeleton show={isLoading} width={58} height={30}>
         <div className="flex h-[34px] overflow-hidden rounded border border-neutral-250">
-          <span className="flex h-8 w-8 cursor-pointer items-center justify-center border-r border-neutral-250 bg-white text-xs text-neutral-350 transition hover:bg-brand-50 hover:text-brand-500">
-            <Icon name="icon-solid-grip-lines" />
-          </span>
+          {!noDragDrop && (
+            <span className="flex h-8 w-8 cursor-pointer items-center justify-center border-r border-neutral-250 bg-white text-xs text-neutral-350 transition hover:bg-brand-50 hover:text-brand-500">
+              <Icon name="icon-solid-grip-lines" />
+            </span>
+          )}
           <Menu
             menus={menu}
             width={248}
diff --git a/libs/pages/environments/src/lib/ui/page-create-edit-deployment-rule/page-create-edit-deployment-rule.tsx b/libs/pages/environments/src/lib/ui/page-create-edit-deployment-rule/page-create-edit-deployment-rule.tsx
index 92aabcfe9c0..d3ebd025fde 100644
--- a/libs/pages/environments/src/lib/ui/page-create-edit-deployment-rule/page-create-edit-deployment-rule.tsx
+++ b/libs/pages/environments/src/lib/ui/page-create-edit-deployment-rule/page-create-edit-deployment-rule.tsx
@@ -28,7 +28,7 @@ export interface PageCreateEditDeploymentRuleProps {
 }
 
 export function PageCreateEditDeploymentRule(props: PageCreateEditDeploymentRuleProps) {
-  const { title, control, onSubmit, clusters, btnLabel = 'Create Rule', defaultAutoStop = false } = props
+  const { title, control, onSubmit, clusters, btnLabel = 'Create rule', defaultAutoStop = false } = props
   const { organizationId, projectId } = useParams()
   const [autoStop, setAutoStop] = useState(defaultAutoStop)
 
diff --git a/libs/pages/environments/src/lib/ui/page-deployment-rules/page-deployment-rules.tsx b/libs/pages/environments/src/lib/ui/page-deployment-rules/page-deployment-rules.tsx
index 3be24c3d76f..2baa2e102a6 100644
--- a/libs/pages/environments/src/lib/ui/page-deployment-rules/page-deployment-rules.tsx
+++ b/libs/pages/environments/src/lib/ui/page-deployment-rules/page-deployment-rules.tsx
@@ -2,7 +2,8 @@ import { Reorder } from 'framer-motion'
 import { type Cluster, type ProjectDeploymentRule } from 'qovery-typescript-axios'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Button, Icon } from '@qovery/shared/ui'
+import { SettingsHeading } from '@qovery/shared/console-shared'
+import { Button, Icon, Section } from '@qovery/shared/ui'
 import DeploymentRuleItem from '../deployment-rule-item/deployment-rule-item'
 import PlaceholderNoRules from '../placeholder-no-rules/placeholder-no-rules'
 
@@ -48,39 +49,56 @@ export function PageDeploymentRules({
         />
       )}
       {listRules.length >= 1 && !isLoading && (
-        <div className="min-h-0 flex-grow overflow-y-auto px-10 py-7">
-          <div className="mb-8 flex w-[640px] items-center justify-between">
-            <p className="text-xs text-neutral-400">
-              Configure your default deployment rules. Drag & drop rules to prioritize them.
-            </p>
-            <Button size="md" onClick={() => navigate(linkNewRule)}>
-              Add rule <Icon className="ml-2" iconName="circle-plus" iconStyle="regular" />
-            </Button>
-          </div>
-
-          <div className={`w-[640px] rounded bg-neutral-100 ${listRules?.length === 0 ? 'hidden' : ''}`}>
-            <div className="rounded-t border-l border-r border-t border-neutral-250">
-              <h2 className="rounded-t border-b border-neutral-250 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-400">
-                Deployment Rules
-              </h2>
+        <div className="flex w-full flex-col justify-between">
+          <Section className="max-w-content-with-navigation-left p-8">
+            <div className="flex justify-between gap-2">
+              <SettingsHeading
+                title=" Deployment rules"
+                description="Configure your default deployment rules. Drag & drop rules to prioritize them."
+              />
+              <Button size="md" onClick={() => navigate(linkNewRule)}>
+                Add rule <Icon className="ml-2" iconName="circle-plus" iconStyle="regular" />
+              </Button>
             </div>
-            <Reorder.Group axis="y" values={listRules} onReorder={handleReorder}>
-              {listRules.map((rule, index) => (
-                <Reorder.Item key={rule.id} value={rule}>
+
+            <div className={`w-[640px] rounded bg-neutral-100 ${listRules?.length === 0 ? 'hidden' : ''}`}>
+              <div className="rounded-t border-l border-r border-t border-neutral-250">
+                <h2 className="rounded-t border-b border-neutral-250 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-400">
+                  Configured rules
+                </h2>
+              </div>
+              <Reorder.Group axis="y" values={listRules} onReorder={handleReorder}>
+                {listRules.length > 1 ? (
+                  listRules.map((rule, index) => (
+                    <Reorder.Item key={rule.id} value={rule}>
+                      <DeploymentRuleItem
+                        id={rule.id}
+                        name={rule.name}
+                        startTime={rule.start_time}
+                        stopTime={rule.stop_time}
+                        weekDays={rule.weekdays}
+                        isLast={index === listRules.length - 1 ? true : false}
+                        isLoading={isLoading}
+                        removeDeploymentRule={deleteDeploymentRule}
+                      />
+                    </Reorder.Item>
+                  ))
+                ) : listRules[0] ? (
                   <DeploymentRuleItem
-                    id={rule.id}
-                    name={rule.name}
-                    startTime={rule.start_time}
-                    stopTime={rule.stop_time}
-                    weekDays={rule.weekdays}
-                    isLast={index === listRules.length - 1 ? true : false}
+                    id={listRules[0].id}
+                    name={listRules[0].name}
+                    startTime={listRules[0].start_time}
+                    stopTime={listRules[0].stop_time}
+                    weekDays={listRules[0].weekdays}
+                    isLast={true}
                     isLoading={isLoading}
                     removeDeploymentRule={deleteDeploymentRule}
+                    noDragDrop
                   />
-                </Reorder.Item>
-              ))}
-            </Reorder.Group>
-          </div>
+                ) : null}
+              </Reorder.Group>
+            </div>
+          </Section>
         </div>
       )}
     </>
diff --git a/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx b/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
index 11422ef5ef1..d120a08e8d4 100644
--- a/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
+++ b/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
@@ -31,6 +31,8 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
               open={false}
               portal={false}
               arrowAlign={MenuAlign.START}
+              paddingMenuX={12}
+              paddingMenuY={12}
               trigger={
                 <Button type="button" variant="plain" radius="full">
                   <Icon iconName="angle-down" />
diff --git a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
index a73fd698366..7b62827f357 100644
--- a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
@@ -5,7 +5,7 @@ import { type ComponentPropsWithoutRef, type ElementRef, type ReactElement, clon
 import { twMerge } from '@qovery/shared/util-js'
 
 const dropdownMenuItemVariants = cva(
-  ['px-3', 'flex', 'items-center', 'h-9', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none'],
+  ['px-3', 'flex', 'items-center', 'h-8', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none'],
   {
     variants: {
       color: {
@@ -135,7 +135,7 @@ const DropdownMenuContent = forwardRef<ElementRef<typeof DropdownMenuPrimitive.C
           sideOffset={sideOffset}
           align={align}
           className={twMerge(
-            'flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550',
+            'flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550',
             className
           )}
           ref={ref}
@@ -156,7 +156,7 @@ const DropdownMenuSeparator = forwardRef<
   return (
     <DropdownMenuPrimitive.Separator
       {...props}
-      className={twMerge('my-2 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600', className)}
+      className={twMerge('my-1 h-[1px] w-full bg-neutral-200 dark:bg-neutral-600', className)}
       ref={ref}
     />
   )
diff --git a/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx b/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
index 9393339f5cb..2660e7c5e83 100644
--- a/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
+++ b/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
@@ -25,7 +25,7 @@ export interface MenuGroupProps {
 }
 
 export function MenuGroup(props: MenuGroupProps) {
-  const { menu = { items: [] }, isLast = true, paddingMenuX = 12, paddingMenuY = 12, style = {}, isFilter } = props
+  const { menu = { items: [] }, isLast = true, paddingMenuX = 8, paddingMenuY = 8, style = {}, isFilter } = props
 
   const [currentItems, setCurrentItems] = useState(menu.items)
   const [filteredItems, setFilteredItems] = useState(menu.items)
diff --git a/libs/shared/ui/src/lib/components/menu/menu.tsx b/libs/shared/ui/src/lib/components/menu/menu.tsx
index 79a77f09478..8f76b9bb9ed 100644
--- a/libs/shared/ui/src/lib/components/menu/menu.tsx
+++ b/libs/shared/ui/src/lib/components/menu/menu.tsx
@@ -80,8 +80,8 @@ export function Menu(props: MenuProps) {
     className = '',
     onClose,
     width = 340,
-    paddingMenuX = 12,
-    paddingMenuY = 12,
+    paddingMenuX = 8,
+    paddingMenuY = 8,
     onOpen,
     isFilter,
     triggerTooltip,
diff --git a/libs/shared/ui/src/lib/styles/components/menu.scss b/libs/shared/ui/src/lib/styles/components/menu.scss
index 39277f169f5..c59e7e9c5b1 100644
--- a/libs/shared/ui/src/lib/styles/components/menu.scss
+++ b/libs/shared/ui/src/lib/styles/components/menu.scss
@@ -66,7 +66,7 @@ $menuTiming: 0.6s;
 
 // item
 .menu-item {
-  @apply mb-1 flex h-9 w-full justify-between rounded-sm px-3 py-0;
+  @apply mb-1 flex h-8 w-full justify-between rounded-sm px-3 py-0;
 
   &:last-of-type {
     @apply mb-0;