Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

Fix: Horizontal hyperscroll on project flag list (#10436)

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-07-30 11:53:25 +02:00 committed by GitHub
parent 32996460df
commit a2d179e1f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
View File

@ -54,6 +54,7 @@ export const StyledButton = styled('button', {
...(isSorted && { ...(isSorted && {
fontWeight: theme.typography.fontWeightBold, fontWeight: theme.typography.fontWeightBold,
}), }),
contain: 'paint',
})); }));
export const StyledLabel = styled('span')(({ theme }) => ({ export const StyledLabel = styled('span')(({ theme }) => ({

23
frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
View File

@ -9,7 +9,6 @@ import {
useState, useState,
} from 'react'; } from 'react';
import { Tooltip } from '@mui/material'; import { Tooltip } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext'; import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
import { import {
StyledButton, StyledButton,
@ -52,7 +51,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
styles, styles,
}) => { }) => {
const { setAnnouncement } = useContext(AnnouncerContext); const { setAnnouncement } = useContext(AnnouncerContext);
const [title, setTitle] = useState(''); const [tooltipTitle, setTooltipTitle] = useState('');
const ref = useRef<HTMLSpanElement>(null); const ref = useRef<HTMLSpanElement>(null);
const ariaSort = isSorted const ariaSort = isSorted
@ -93,17 +92,17 @@ export const CellSortable: FC<ICellSortableProps> = ({
}, [align]); }, [align]);
useEffect(() => { useEffect(() => {
const newTitle = const newTooltipTitle =
ariaTitle && ariaTitle &&
ref.current && ref.current &&
ref?.current?.offsetWidth < ref?.current?.scrollWidth ref?.current?.offsetWidth < ref?.current?.scrollWidth
? `${children}` ? `${children}`
: ''; : '';
if (newTitle !== title) { if (newTooltipTitle !== tooltipTitle) {
setTitle(newTitle); setTooltipTitle(newTooltipTitle);
} }
}, [setTitle, ariaTitle]); }, [setTooltipTitle, ariaTitle]);
return ( return (
<StyledTableCell <StyledTableCell
@ -114,10 +113,8 @@ export const CellSortable: FC<ICellSortableProps> = ({
isFlexGrow={isFlexGrow} isFlexGrow={isFlexGrow}
isSortable={isSortable} isSortable={isSortable}
> >
<ConditionallyRender {isSortable ? (
condition={isSortable} <Tooltip title={tooltipTitle} arrow>
show={
<Tooltip title={title} arrow>
<StyledButton <StyledButton
isSorted={isSorted} isSorted={isSorted}
type='button' type='button'
@ -147,9 +144,9 @@ export const CellSortable: FC<ICellSortableProps> = ({
</StyledVisibleAbsoluteLayer> </StyledVisibleAbsoluteLayer>
</StyledButton> </StyledButton>
</Tooltip> </Tooltip>
} ) : (
elseShow={<div style={alignStyle}>{children}</div>} <div style={alignStyle}>{children}</div>
/> )}
</StyledTableCell> </StyledTableCell>
); );
}; };

2
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -148,7 +148,7 @@ exports[`renders an empty list correctly 1`] = `
<button <button
aria-label="" aria-label=""
aria-labelledby={null} aria-labelledby={null}
className=" css-sskrcd" className=" css-3uw884"
data-mui-internal-clone-element={true} data-mui-internal-clone-element={true}
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}