saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-02 18:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed style of dropdowns so remain on screen

Browse Source
This commit is contained in:
Connor Yoh 2025-07-31 18:24:12 +01:00
parent 0c67b640c2
commit 56f6a45715
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/tools/convert/ConvertSettings.tsx
View File

@ -176,7 +176,7 @@ const ConvertSettings = ({
options={enhancedFromOptions} options={enhancedFromOptions}
onChange={handleFromExtensionChange} onChange={handleFromExtensionChange}
disabled={disabled} disabled={disabled}
minWidth="21.875rem" minWidth="18rem"
/> />
</Stack> </Stack>
@ -214,7 +214,7 @@ const ConvertSettings = ({
options={enhancedToOptions} options={enhancedToOptions}
onChange={handleToExtensionChange} onChange={handleToExtensionChange}
disabled={disabled} disabled={disabled}
minWidth="21.875rem" minWidth="18rem"
/> />
)} )}
</Stack> </Stack>

10
frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
View File

@ -106,7 +106,10 @@ const GroupedFormatDropdown = ({
</Popover.Target> </Popover.Target>
<Popover.Dropdown <Popover.Dropdown
style={{ style={{
minWidth, minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
maxWidth: '90vw',
maxHeight: '40vh',
overflow: 'auto',
backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white, backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`, border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
}} }}
@ -122,7 +125,7 @@ const GroupedFormatDropdown = ({
> >
{groupName} {groupName}
</Text> </Text>
<Group gap="xs"> <Group gap="xs" style={{ flexWrap: 'wrap' }}>
{groupOptions.map((option) => ( {groupOptions.map((option) => (
<Button <Button
key={option.value} key={option.value}
@ -134,7 +137,8 @@ const GroupedFormatDropdown = ({
style={{ style={{
fontSize: '0.75rem', fontSize: '0.75rem',
height: '2rem', height: '2rem',
padding: '0 0.75rem' padding: '0 0.75rem',
flexShrink: 0
}} }}
> >
{option.label} {option.label}