From 9b385bbe8ab545599bf441f13a639d865759fff0 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Tue, 7 Oct 2025 17:38:21 +0200 Subject: [PATCH 01/17] Fix warning missing margin --- .../OrderManualTransactionRefundPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx b/src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx index 994f027e3c6..320df7010bc 100644 --- a/src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx +++ b/src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx @@ -184,7 +184,7 @@ export const OrderManualTransactionRefundPage = ({ - + From d12251d9289c252f1f0c553661b9c2bab518fce7 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Tue, 7 Oct 2025 17:38:32 +0200 Subject: [PATCH 02/17] Fix box missing spacing --- .../OrderTransactionSummary.tsx | 108 +++++++++--------- 1 file changed, 56 insertions(+), 52 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx index f5c3c2c36b0..60cbe441c56 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx @@ -49,38 +49,33 @@ export const OrderTransactionSummary = ({ - - - + + + {/* Selected products row - no checkbox */} + - {currency ? ( - - ) : ( - - - - )} - - + + {currency ? ( + + ) : ( + + + + )} + + + {/* Border - full width (incl. padding) */} + + + + {canRefundShipping ? ( - + @@ -89,6 +84,7 @@ export const OrderTransactionSummary = ({ )} - {shippingCost ? ( - - ) : ( - - - - )} - - - + + {shippingCost ? ( + + ) : ( + + + + )} + + + {/* Border - full width (incl. padding) */} + + + + + {/* Total row */} + + + {/* Error message */} + {!!amountError && ( + <> + + + + + {amountError.message} + + + + )} - {!!amountError && ( - - - {amountError.message} - - - )} - + ); }; From 6e270c2ad7007e9ee9d43095af4c79cbf5694659 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Tue, 7 Oct 2025 17:42:21 +0200 Subject: [PATCH 03/17] Use smaller gap, reuse component --- .../OrderTransactionRefundPage.tsx | 5 ++- .../OrderTransactionSummary.tsx | 35 +++++++++++++------ 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx b/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx index 89314ba35a7..e04aecff472 100644 --- a/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx +++ b/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx @@ -290,7 +290,7 @@ const OrderTransactionRefundPage = ({ - + - + Refund reason diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx index 60cbe441c56..4622161d8c0 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx @@ -20,6 +20,21 @@ interface OrderTransactionSummaryProps extends BoxProps { currency: string | undefined; } +// For usage in grid that exceeds our 16px padding for full background line +const FullWidthLine = () => { + return ( + + + + ); +}; + export const OrderTransactionSummary = ({ amountError, control, @@ -50,7 +65,13 @@ export const OrderTransactionSummary = ({ - + {/* Selected products row - no checkbox */} @@ -65,10 +86,7 @@ export const OrderTransactionSummary = ({ )} - {/* Border - full width (incl. padding) */} - - - + {canRefundShipping ? ( - {/* Border - full width (incl. padding) */} - - - + {/* Total row */} @@ -145,6 +160,6 @@ export const OrderTransactionSummary = ({ - + ); }; From 7201b7f7c9fb29f3d029dd75aac91b6f0ba18b68 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Tue, 7 Oct 2025 17:57:04 +0200 Subject: [PATCH 04/17] Optically align checkbox --- .../OrderTransactionSummary.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx index 4622161d8c0..0ba24ce3b86 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx @@ -29,7 +29,7 @@ const FullWidthLine = () => { borderBottomWidth={1} borderColor="default1" position="absolute" - style={{ left: -16, right: -16, bottom: 0, height: "1px" }} + style={{ left: -12, right: -16, bottom: 0, height: "1px" }} /> ); @@ -64,10 +64,10 @@ export const OrderTransactionSummary = ({ - + Date: Wed, 8 Oct 2025 16:11:20 +0200 Subject: [PATCH 05/17] Add possibility to override layout breakpoints --- src/components/AppLayout/AppLayout.tsx | 5 +- src/components/Sidebar/Sidebar.module.css | 17 ++++ src/components/Sidebar/Sidebar.tsx | 107 +++++++++++++++------- src/components/Sidebar/SidebarContext.tsx | 56 +++++++++++ 4 files changed, 150 insertions(+), 35 deletions(-) create mode 100644 src/components/Sidebar/Sidebar.module.css create mode 100644 src/components/Sidebar/SidebarContext.tsx diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index e6981177c22..38f1b95e6ef 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -7,6 +7,7 @@ import { DevModePanel } from "../DevModePanel/DevModePanel"; import NavigatorSearch from "../NavigatorSearch"; import { useSavebarRef } from "../Savebar/SavebarRefContext"; import { Sidebar } from "../Sidebar"; +import { SidebarProvider } from "../Sidebar/SidebarContext"; import { useStyles } from "./styles"; interface AppLayoutProps { @@ -20,7 +21,7 @@ const AppLayout = ({ children }: AppLayoutProps) => { const [appState] = useAppState(); return ( - <> + @@ -58,7 +59,7 @@ const AppLayout = ({ children }: AppLayoutProps) => { /> - + ); }; diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css new file mode 100644 index 00000000000..5ed2afea3b1 --- /dev/null +++ b/src/components/Sidebar/Sidebar.module.css @@ -0,0 +1,17 @@ +.fullSidebarWide { + display: none !important; +} + +.drawerWide { + display: block !important; +} + +@media (min-width: 1200px) { + .fullSidebarWide { + display: block !important; + } + + .drawerWide { + display: none !important; + } +} diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 875b854551c..6718c554629 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -1,38 +1,79 @@ import { Box, Drawer, MenuIcon } from "@saleor/macaw-ui-next"; import { SidebarContent } from "./Content"; +import classes from "./Sidebar.module.css"; +import { useSidebarBreakpointContext } from "./SidebarContext"; -export const Sidebar = () => ( - <> - - - - - - - - +export const Sidebar = () => { + const { breakpoint } = useSidebarBreakpointContext(); + + if (breakpoint === "wide") { + return ( + <> +
+ + - - - - - - - -); +
+
+ + + + + + + + + + +
+ + ); + } + + return ( + <> + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/components/Sidebar/SidebarContext.tsx b/src/components/Sidebar/SidebarContext.tsx new file mode 100644 index 00000000000..83ee58339b2 --- /dev/null +++ b/src/components/Sidebar/SidebarContext.tsx @@ -0,0 +1,56 @@ +import { createContext, ReactNode, useContext, useEffect, useState } from "react"; + +type SidebarBreakpoint = "default" | "wide"; + +interface SidebarContextValue { + breakpoint: SidebarBreakpoint; + setBreakpoint: (breakpoint: SidebarBreakpoint) => void; +} + +const SidebarContext = createContext(undefined); + +export const SidebarProvider = ({ children }: { children: ReactNode }) => { + const [breakpoint, setBreakpoint] = useState("default"); + + return ( + + {children} + + ); +}; + +export const useSidebarBreakpointContext = () => { + const context = useContext(SidebarContext); + + if (context === undefined) { + throw new Error("useSidebarBreakpoint must be used within a SidebarProvider"); + } + + return context; +}; + +/** + * Hook to set a custom sidebar breakpoint for a page. + * The breakpoint is automatically reset to "default" when the component unmounts. + * + * @param breakpoint - The breakpoint to use ("default" or "wide") + * + * @example + * ```tsx + * const MyPage = () => { + * useCustomSidebarBreakpoint("wide"); + * return
Page content
; + * }; + * ``` + */ +export const useCustomSidebarBreakpoint = (breakpoint: SidebarBreakpoint) => { + const { setBreakpoint } = useSidebarBreakpointContext(); + + useEffect(() => { + setBreakpoint(breakpoint); + + return () => { + setBreakpoint("default"); + }; + }, [breakpoint, setBreakpoint]); +}; From 0204de8310bb1642aadb2e5f0b9697a819821738 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Wed, 8 Oct 2025 16:11:36 +0200 Subject: [PATCH 06/17] Use custom breakpoints for OrderTransactionRefundPage --- .../OrderTransactionRefundPage.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx b/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx index e04aecff472..86ccb61f8a2 100644 --- a/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx +++ b/src/orders/components/OrderTransactionRefundPage/OrderTransactionRefundPage.tsx @@ -6,6 +6,7 @@ import Link from "@dashboard/components/Link"; import { Pill } from "@dashboard/components/Pill"; import { hasPermissions } from "@dashboard/components/RequirePermissions"; import { Savebar } from "@dashboard/components/Savebar"; +import { useCustomSidebarBreakpoint } from "@dashboard/components/Sidebar/SidebarContext"; import { OrderDetailsGrantRefundFragment, PermissionEnum, @@ -145,6 +146,9 @@ const OrderTransactionRefundPage = ({ const navigate = useNavigator(); const intl = useIntl(); + // Use wider breakpoint to show minimal sidebar and give more horizontal space for the transaction table + useCustomSidebarBreakpoint("wide"); + const [editedRefundLineIndex, setEditedRefundLineIndex] = useState(null); const datagridErrors: OrderRefundTransactionDatagridError[] = errors @@ -289,7 +293,13 @@ const OrderTransactionRefundPage = ({ - + Date: Wed, 8 Oct 2025 16:11:53 +0200 Subject: [PATCH 07/17] Refactor transaction grid to avoid overflows --- .../OrderTransactionTiles.tsx | 58 +++++++++++-------- 1 file changed, 35 insertions(+), 23 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx index c81238e7336..708304c0ce1 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx @@ -64,37 +64,49 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio ) : ( )} - + {transaction.events.map((event, eventIndex) => { const { type, status } = mapTransactionEvent(event); + const isLastRow = eventIndex === transaction.events.length - 1; return ( - - + <> + - - - {event.pspReference ? ( - - ) : ( - + + + + + + + + {event.pspReference ? ( + + ) : ( + + )} + + + + + {!isLastRow && ( + )} - - + ); })} From 8c0325476f3c3dd72bf917019e32e49b1d12d14a Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Wed, 8 Oct 2025 16:16:05 +0200 Subject: [PATCH 08/17] Fix broken sidebar when customized --- src/components/Sidebar/Sidebar.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index 5ed2afea3b1..e91c000a977 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/src/components/Sidebar/Sidebar.module.css @@ -1,8 +1,10 @@ .fullSidebarWide { + height: 100%; display: none !important; } .drawerWide { + height: 100%; display: block !important; } From f5966c2ec051315f8dbac39711a79044a7bbbb8e Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 13:27:36 +0200 Subject: [PATCH 09/17] Add proper scroll to order transaction tiles --- .../OrderTransactionTiles.tsx | 40 +++++++++++++++---- .../OrderTransactionTiles/TileHeader.tsx | 6 ++- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx index 708304c0ce1..2cb4a73f6cb 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx @@ -27,7 +27,7 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio if (!transactions) { return ( - + ); } @@ -35,12 +35,21 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio return ( - + {transactions.map(transaction => { const isDisabled = !transaction.actions.includes(TransactionActionEnum.REFUND); return ( {isDisabled ? ( @@ -66,10 +79,16 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio )} {transaction.events.map((event, eventIndex) => { const { type, status } = mapTransactionEvent(event); @@ -77,7 +96,12 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio return ( <> - + diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx index e3f7b70972c..9b3ab1a9793 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx @@ -13,12 +13,14 @@ interface TileHeaderProps { export const TileHeader = ({ transaction, isDisabled = false }: TileHeaderProps) => { return ( From 90c2c2b77958df24969f6cbef8a922fefccca441 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 13:46:38 +0200 Subject: [PATCH 10/17] Fix rendering bugs on firefox --- .../OrderTransactionTiles.tsx | 151 +++++++++--------- .../OrderTransactionTiles/TileHeader.tsx | 3 +- 2 files changed, 79 insertions(+), 75 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx index 2cb4a73f6cb..a8cf0fdfa9f 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx @@ -49,90 +49,95 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio return ( - {isDisabled ? ( - - - - - - - - - - - ) : ( - - )} - {transaction.events.map((event, eventIndex) => { - const { type, status } = mapTransactionEvent(event); - const isLastRow = eventIndex === transaction.events.length - 1; - - return ( - <> - - + {isDisabled ? ( + + + + + + + + + + ) : ( + + )} + + {transaction.events.map((event, eventIndex) => { + const { type, status } = mapTransactionEvent(event); + const isLastRow = eventIndex === transaction.events.length - 1; - - - - - - - - {event.pspReference ? ( - - ) : ( - - )} - - - - - {!isLastRow && ( + return ( + <> - )} - - ); - })} + key={`${event.id}-status`} + justifySelf="start" + paddingY={4} + __marginTop="2px" // Optically align text inside status + > + + + + + + + + + + + {event.pspReference ? ( + + ) : ( + + )} + + + + + {!isLastRow && ( + + )} + + ); + })} + ); diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx index 9b3ab1a9793..5ec580d9065 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/TileHeader.tsx @@ -19,8 +19,7 @@ export const TileHeader = ({ transaction, isDisabled = false }: TileHeaderProps) width="100%" position="sticky" top={0} - left={4} - right={0} + left={0} display="grid" __gridTemplateColumns="max-content 1fr" > From 434e95c613f7548b0f7b00b82a4c07adcd98d20d Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 13:51:17 +0200 Subject: [PATCH 11/17] Add better paddings --- .../components/OrderTransactionTiles/OrderTransactionTiles.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx index a8cf0fdfa9f..24433a4b1cd 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionTiles/OrderTransactionTiles.tsx @@ -63,6 +63,8 @@ export const OrderTransactionTiles = ({ transactions, control }: OrderTransactio overflowX="auto" width="100%" paddingX={4} + paddingTop={1} + paddingBottom={2} > {isDisabled ? ( From d171c4396d06a15f124b27bd3b3936514d203b6c Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 13:53:29 +0200 Subject: [PATCH 12/17] Add changeset --- .changeset/lovely-times-repair.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lovely-times-repair.md diff --git a/.changeset/lovely-times-repair.md b/.changeset/lovely-times-repair.md new file mode 100644 index 00000000000..dad5c7ba376 --- /dev/null +++ b/.changeset/lovely-times-repair.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Fixed layout of Granted refund page. Transactions details box will no longer have overlayed text on top of each other and will instead add proper scrollbar on small viewport sizes. This page will now also switch to smaller sidebar sooner than other pages in order to show more details on smaller viewport sizes. From 0b34981dbad34f422f5e6af1c9912796bc13625f Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 13:55:05 +0200 Subject: [PATCH 13/17] CR: remove !important --- src/components/Sidebar/Sidebar.module.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index e91c000a977..b2dfacf76b6 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/src/components/Sidebar/Sidebar.module.css @@ -1,19 +1,19 @@ .fullSidebarWide { height: 100%; - display: none !important; + display: none; } .drawerWide { height: 100%; - display: block !important; + display: block; } @media (min-width: 1200px) { .fullSidebarWide { - display: block !important; + display: block; } .drawerWide { - display: none !important; + display: none; } } From 3ebbd15f109870749e8e150b046bb6e2d563f319 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 14:00:12 +0200 Subject: [PATCH 14/17] CR: use css variables and add comments --- .../OrderTransactionSummary.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx index 0ba24ce3b86..7baab9af3ed 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx @@ -20,7 +20,8 @@ interface OrderTransactionSummaryProps extends BoxProps { currency: string | undefined; } -// For usage in grid that exceeds our 16px padding for full background line +// For usage in grid that exceeds padding for full background line +// Negative spacing offsets the parent container's padding (paddingLeft={3}, padding={4}) const FullWidthLine = () => { return ( @@ -29,7 +30,14 @@ const FullWidthLine = () => { borderBottomWidth={1} borderColor="default1" position="absolute" - style={{ left: -12, right: -16, bottom: 0, height: "1px" }} + style={{ + // Counteracts paddingLeft={3} (12px) from parent Box at line 67 + left: "calc(var(--mu-spacing-3) * -1)", + // Counteracts padding={4} right side (16px) from parent Box at line 67 + right: "calc(var(--mu-spacing-4) * -1)", + bottom: 0, + height: "1px", + }} /> ); From e20aa933dbe6098a6a066247b3b254c006271302 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 14:18:37 +0200 Subject: [PATCH 15/17] CR: Add better explanation --- src/components/Sidebar/Sidebar.module.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css index b2dfacf76b6..380a8078f0d 100644 --- a/src/components/Sidebar/Sidebar.module.css +++ b/src/components/Sidebar/Sidebar.module.css @@ -8,6 +8,8 @@ display: block; } +/** This is used when we want to show smaller sidebar sooner than the default 1024px +* in order to show more page content */ @media (min-width: 1200px) { .fullSidebarWide { display: block; From 1a2a9c97b93a3595fdbaae3fa7e8478546433f7c Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 14:23:34 +0200 Subject: [PATCH 16/17] CR: remove empty divs --- .../OrderTransactionRefundSummary/OrderTransactionSummary.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx index 7baab9af3ed..f12b37a8469 100644 --- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx +++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionRefundSummary/OrderTransactionSummary.tsx @@ -156,9 +156,7 @@ export const OrderTransactionSummary = ({ {/* Error message */} {!!amountError && ( <> - - - + {amountError.message} From 829aa3107d2be868285df6f9dca59b52977d3779 Mon Sep 17 00:00:00 2001 From: Jonatan Witoszek Date: Thu, 9 Oct 2025 14:29:44 +0200 Subject: [PATCH 17/17] Fix failing tests --- src/components/Sidebar/Sidebar.test.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/Sidebar.test.tsx b/src/components/Sidebar/Sidebar.test.tsx index dc6e9d9432c..009d07eec1c 100644 --- a/src/components/Sidebar/Sidebar.test.tsx +++ b/src/components/Sidebar/Sidebar.test.tsx @@ -9,6 +9,7 @@ import { ReactNode } from "react"; import { MemoryRouter } from "react-router-dom"; import { Sidebar } from "./Sidebar"; +import { SidebarProvider } from "./SidebarContext"; jest.mock("./menu/hooks/useMenuStructure", () => ({ useMenuStructure: jest.fn(() => []), @@ -55,7 +56,9 @@ const Wrapper = ({ children }: { children: ReactNode }) => { {/* @ts-expect-error - legacy types */} - {children} + + {children} + );