From a3de2c63ef8f77826d39d727d427c464264af99b Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 25 May 2023 20:29:22 +0800 Subject: [PATCH 1/2] Fix the grid columns for various sizes --- .../templates/homeFeed/HomeFeedContainer.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index cce0f2be7..e2be6936b 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -905,19 +905,15 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element { margin: props.layout == 'LIST_LAYOUT' ? '16px -16px' : undefined, borderRadius: props.layout == 'LIST_LAYOUT' ? 0 : undefined, }, - '@md': { - gridTemplateColumns: - props.layout == 'LIST_LAYOUT' ? 'none' : '1fr 1fr', - }, - '@lg': { + '@media (min-width: 930px)': { gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(2, 1fr)', }, - '@xl': { + '@media (min-width: 1280px)': { gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)', }, - '@xxl': { + '@media (min-width: 1600px)': { gridTemplateColumns: props.layout == 'LIST_LAYOUT' ? 'none' : 'repeat(4, 1fr)', }, From cd162f653e97f44ccc4e33efe03d330909b8950d Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 25 May 2023 20:35:07 +0800 Subject: [PATCH 2/2] Reader settings offset with smaller headers --- .../web/components/templates/article/DisplaySettingsModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/components/templates/article/DisplaySettingsModal.tsx b/packages/web/components/templates/article/DisplaySettingsModal.tsx index b0a3177d0..dafa94005 100644 --- a/packages/web/components/templates/article/DisplaySettingsModal.tsx +++ b/packages/web/components/templates/article/DisplaySettingsModal.tsx @@ -24,7 +24,7 @@ export function DisplaySettingsModal( css={{ width: '345px', padding: '0px', - top: '300px', + top: '262px', left: 'calc(100% - 250px)', '@lgDown': { top: '300px',