jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: bookmarks layout (#2675)

Browse Source 
* fix: bookmarks layout

* chore: address pull request feedback

* fix: make icon bigger when only icon exists for vertical item

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
2025-03-28 19:11:31 +00:00
committed by GitHub
parent 76b67ac8e1
commit 8a071f9ab6
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/widgets/src/bookmarks/component.tsx
View File

@@ -154,7 +154,7 @@ const GridLayout = ({
const board = useRequiredBoard(); const board = useRequiredBoard();
return ( return (
<Flex mih="100%" miw="100%" gap={4} wrap="wrap"> <Flex miw="100%" gap={4} wrap="wrap" style={{ flex: 1 }}>
{data.map((app) => ( {data.map((app) => (
<UnstyledButton <UnstyledButton
component="a" component="a"
@@ -208,7 +208,7 @@ const VerticalItem = ({
hasIconColor: boolean; hasIconColor: boolean;
}) => { }) => {
return ( return (
<Stack h="100%" gap="sm"> <Stack h="100%" miw={16} gap="sm" justify={"center"}>
{!hideTitle && ( {!hideTitle && (
<Text fw={700} ta="center" size="xs"> <Text fw={700} ta="center" size="xs">
{app.name} {app.name}
@@ -221,10 +221,10 @@ const VerticalItem = ({
alt={app.name} alt={app.name}
className={classes.bookmarkIcon} className={classes.bookmarkIcon}
style={{ style={{
width: hideHostname && hideTitle ? 16 : 24, width: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
height: hideHostname && hideTitle ? 16 : 24, height: hideHostname && hideTitle ? "min(max(100%, 16px), 40px)" : 40,
overflow: "auto", overflow: "auto",
flex: 1, flex: "unset",
marginLeft: "auto", marginLeft: "auto",
marginRight: "auto", marginRight: "auto",
}} }}
@@ -253,7 +253,7 @@ const HorizontalItem = ({
hasIconColor: boolean; hasIconColor: boolean;
}) => { }) => {
return ( return (
<Group wrap="nowrap" gap="xs" h="100%" justify="center"> <Group wrap="nowrap" gap="xs" h="100%" justify="start">
{!hideIcon && ( {!hideIcon && (
<MaskedOrNormalImage <MaskedOrNormalImage
imageUrl={app.iconUrl} imageUrl={app.iconUrl}