fix: permission button unintended full width behavior (#8920)

Follow-up to #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)
Unleash · Dec 5, 2024 · ff9492d · ff9492d
1 parent bd0ad18
commit ff9492d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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]}