Fix for full width env selector

Author: samejr

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -57,7 +57,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 w-full items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -87,7 +87,7 @@ export function EnvironmentSelector({
         side="right"
         sideOffset={8}
         hidden={!isCollapsed}
-        buttonClassName="!h-8 w-full"
+        buttonClassName="!h-8"
         asChild
         disableHoverableContent
       />

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -217,6 +217,7 @@ export function SideMenu({
                 organization={organization}
                 project={project}
                 environment={environment}
+                className="w-full"
                 isCollapsed={isCollapsed}
               />
               {environment.type === "DEVELOPMENT" && project.engine === "V2" && (
@@ -251,7 +252,7 @@ export function SideMenu({
             </div>
           </div>
 
-          <div className="w-full space-y-px">
+          <div className="w-full">
             <SideMenuItem
               name="Tasks"
               icon={TaskIconSmall}
@@ -348,7 +349,11 @@ export function SideMenu({
             )}
           </div>
 
-          <SideMenuSection title="Manage" isSideMenuCollapsed={isCollapsed}>
+          <SideMenuSection
+            title="Manage"
+            isSideMenuCollapsed={isCollapsed}
+            itemSpacingClassName="space-y-0"
+          >
             <SideMenuItem
               name="Bulk actions"
               icon={ListCheckedIcon}

apps/webapp/app/components/navigation/SideMenuSection.tsx

@@ -9,6 +9,7 @@ type Props = {
   children: React.ReactNode;
   /** When true, hides the section header and shows only children */
   isSideMenuCollapsed?: boolean;
+  itemSpacingClassName?: string;
 };
 
 /** A collapsible section for the side menu
@@ -20,6 +21,7 @@ export function SideMenuSection({
   onCollapseToggle,
   children,
   isSideMenuCollapsed = false,
+  itemSpacingClassName = "space-y-px",
 }: Props) {
   const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
 
@@ -86,7 +88,7 @@ export function SideMenuSection({
           style={{ overflow: "hidden" }}
         >
           <motion.div
-            className="w-full space-y-px"
+            className={`w-full ${itemSpacingClassName}`}
             variants={{
               expanded: {
                 translateY: 0,