From 80bc14a5e600728442b31315ba45014ab4c4f576 Mon Sep 17 00:00:00 2001
From: aregnery <aregnery@gitlab.com>
Date: Fri, 26 Sep 2025 14:00:05 -0400
Subject: [PATCH] Adjust chrome styling below lg breakpoint

Changelog: changed
EE: true
---
 app/assets/stylesheets/framework/application-chrome.scss | 9 +++++----
 .../assets/javascripts/ai/components/navigation_rail.vue | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/framework/application-chrome.scss b/app/assets/stylesheets/framework/application-chrome.scss
index e30966458c0593..7bed63b8328b15 100644
--- a/app/assets/stylesheets/framework/application-chrome.scss
+++ b/app/assets/stylesheets/framework/application-chrome.scss
@@ -34,7 +34,8 @@
 
   // When using panels, remove top padding
   &.page-with-panels .layout-page {
-    @apply gl-pt-0 #{!important};
+    @apply gl-pt-0 #{!important}; 
+    @apply gl-pr-0 #{!important};
   }
 
   // Super topbar
@@ -241,7 +242,7 @@
 
   // Panels container
   .panels-container {
-    @apply gl-relative gl-grow gl-flex gl-pr-0 gl-pb-0;
+    @apply gl-relative gl-grow gl-flex !gl-ml-0 gl-pr-0 gl-pb-0;
 
     .panel-content-inner,
     .vue-portal-target .work-item-drawer-content {
@@ -257,7 +258,7 @@
       }
 
       .container-fluid {
-        @apply gl-px-4 gl-pb-3;
+        @apply gl-px-0 sm:gl-px-3 gl-pb-3;
       }
 
       // Hide alert wrapper if it's empty
@@ -294,7 +295,7 @@
 
   // AI panel
   .paneled-view.ai-panels {
-    @apply gl-px-0 sm:gl-px-3 lg:gl-px-2 lg:-gl-mx-2;
+    @apply gl-px-0 lg:gl-px-2 lg:-gl-mx-2;
 
     .ai-panel-header {
       z-index: $top-bar-z-index;
diff --git a/ee/app/assets/javascripts/ai/components/navigation_rail.vue b/ee/app/assets/javascripts/ai/components/navigation_rail.vue
index 3546f40b4c45e2..d1a259b6283774 100644
--- a/ee/app/assets/javascripts/ai/components/navigation_rail.vue
+++ b/ee/app/assets/javascripts/ai/components/navigation_rail.vue
@@ -40,7 +40,7 @@ export default {
 </script>
 <template>
   <div
-    class="gl-flex gl-gap-3 gl-bg-transparent gl-p-3 sm:gl-px-0 lg:gl-flex-col"
+    class="gl-my-1 gl-flex gl-grow gl-justify-center gl-gap-3 gl-rounded-[1rem] gl-bg-alpha-light-36 gl-p-2 lg:gl-m-0 lg:gl-flex-col lg:gl-justify-start lg:gl-bg-transparent lg:gl-p-3 lg:gl-pl-0 dark:gl-bg-alpha-dark-24"
     role="tablist"
     aria-orientation="vertical"
   >
-- 
GitLab