From ff9492d4f7732bd2de73297f7d7c7d05ebdd811a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 5 Dec 2024 09:23:06 +0000
Subject: [PATCH] fix: permission button unintended full width behavior (#8920)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to https://github.com/Unleash/unleash/pull/8882

The referenced PR caused an unintended behavior by making the button
behave like a normal button would on certain parent containers.
Previously, the span wrapper caused a side effect that restricted the
button’s width, which we were relying on.

By setting some initial styling properties, this PR should hopefully
satisfy both use cases.


![image](https://github.com/user-attachments/assets/2c5a4a97-51ff-426c-b5da-7b00d5d6516a)


![image](https://github.com/user-attachments/assets/f8f3fc13-df19-44d5-8fce-4bb0dc323d4e)


![image](https://github.com/user-attachments/assets/80625e88-0d1a-4c83-93d7-250351dae3a4)
---
 .../common/PermissionButton/PermissionButton.tsx      | 11 ++++++++---
 .../__tests__/__snapshots__/TagTypeList.test.tsx.snap |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
index 9a1b507892..1286590f91 100644
--- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx
+++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
@@ -1,4 +1,4 @@
-import { Button, type ButtonProps } from '@mui/material';
+import { Button, styled, type ButtonProps } from '@mui/material';
 import Lock from '@mui/icons-material/Lock';
 import React from 'react';
 import {
@@ -12,6 +12,11 @@ import {
     useHasProjectEnvironmentAccess,
 } from 'hooks/useHasAccess';
 
+const StyledButton = styled(Button)({
+    justifySelf: 'start',
+    alignSelf: 'start',
+});
+
 export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
     permission: string | string[];
     onClick?: (e: any) => void;
@@ -104,7 +109,7 @@ const BasePermissionButton = React.forwardRef<
                 title={formatAccessText(access, tooltipProps?.title)}
                 arrow
             >
-                <Button
+                <StyledButton
                     ref={ref}
                     onClick={onClick}
                     disabled={disabled || !access}
@@ -115,7 +120,7 @@ const BasePermissionButton = React.forwardRef<
                     endIcon={endIcon}
                 >
                     {children}
-                </Button>
+                </StyledButton>
             </TooltipResolver>
         );
     },
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index 56195a34a9..557164a851 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
               />
               <button
                 aria-labelledby="useId-0"
-                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-om67xs-MuiButtonBase-root-MuiButton-root"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1pzmo7x-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}