Fix visual regressions on refund with line items view

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 (
-    <>
+    <SidebarProvider>
       <DevModePanel />
       <NavigatorSearch />
 
@@ -58,7 +59,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
           />
         </Box>
       </Box>
-    </>
+    </SidebarProvider>
   );
 };
 

src/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,19 @@
+.fullSidebarWide {
+  height: 100%;
+  display: none !important;
+}
+
+.drawerWide {
+  height: 100%;
+  display: block !important;
+}
+
+@media (min-width: 1200px) {
+  .fullSidebarWide {
+    display: block !important;
+  }
+
+  .drawerWide {
+    display: none !important;
+  }
+}

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 = () => (
-  <>
-    <Box
-      __width="260px"
-      display={{ mobile: "none", tablet: "none", desktop: "block" }}
-      height="100%"
-    >
-      <SidebarContent />
-    </Box>
-    <Box display={{ mobile: "block", tablet: "block", desktop: "none" }}>
-      <Drawer>
-        <Drawer.Trigger>
-          <Box
-            as="button"
-            borderWidth={0}
-            backgroundColor="default1"
-            cursor="pointer"
-            data-test-id="sidebar-drawer-open"
-          >
-            <MenuIcon />
+export const Sidebar = () => {
+  const { breakpoint } = useSidebarBreakpointContext();
+
+  if (breakpoint === "wide") {
+    return (
+      <>
+        <div className={classes.fullSidebarWide}>
+          <Box __width="260px" height="100%">
+            <SidebarContent />
           </Box>
-        </Drawer.Trigger>
-        <Drawer.Content
-          backgroundColor="default2"
-          data-test-id="sidebar-drawer-content"
-          paddingTop={0}
-          __width="260px"
-        >
-          <SidebarContent />
-        </Drawer.Content>
-      </Drawer>
-    </Box>
-  </>
-);
+        </div>
+        <div className={classes.drawerWide}>
+          <Drawer>
+            <Drawer.Trigger>
+              <Box
+                as="button"
+                borderWidth={0}
+                backgroundColor="default1"
+                cursor="pointer"
+                data-test-id="sidebar-drawer-open"
+              >
+                <MenuIcon />
+              </Box>
+            </Drawer.Trigger>
+            <Drawer.Content
+              backgroundColor="default2"
+              data-test-id="sidebar-drawer-content"
+              paddingTop={0}
+              __width="260px"
+            >
+              <SidebarContent />
+            </Drawer.Content>
+          </Drawer>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        __width="260px"
+        display={{ mobile: "none", tablet: "none", desktop: "block" }}
+        height="100%"
+      >
+        <SidebarContent />
+      </Box>
+      <Box display={{ mobile: "block", tablet: "block", desktop: "none" }}>
+        <Drawer>
+          <Drawer.Trigger>
+            <Box
+              as="button"
+              borderWidth={0}
+              backgroundColor="default1"
+              cursor="pointer"
+              data-test-id="sidebar-drawer-open"
+            >
+              <MenuIcon />
+            </Box>
+          </Drawer.Trigger>
+          <Drawer.Content
+            backgroundColor="default2"
+            data-test-id="sidebar-drawer-content"
+            paddingTop={0}
+            __width="260px"
+          >
+            <SidebarContent />
+          </Drawer.Content>
+        </Drawer>
+      </Box>
+    </>
+  );
+};

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<SidebarContextValue | undefined>(undefined);
+
+export const SidebarProvider = ({ children }: { children: ReactNode }) => {
+  const [breakpoint, setBreakpoint] = useState<SidebarBreakpoint>("default");
+
+  return (
+    <SidebarContext.Provider value={{ breakpoint, setBreakpoint }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+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 <div>Page content</div>;
+ * };
+ * ```
+ */
+export const useCustomSidebarBreakpoint = (breakpoint: SidebarBreakpoint) => {
+  const { setBreakpoint } = useSidebarBreakpointContext();
+
+  useEffect(() => {
+    setBreakpoint(breakpoint);
+
+    return () => {
+      setBreakpoint("default");
+    };
+  }, [breakpoint, setBreakpoint]);
+};

src/orders/components/OrderManualTransactionRefundPage/OrderManualTransactionRefundPage.tsx

@@ -184,7 +184,7 @@ export const OrderManualTransactionRefundPage = ({
             <Box marginBottom={"auto"}>
               <Reason />
             </Box>
-            <DashboardCard.Content>
+            <DashboardCard.Content marginTop={4}>
               <OrderManualTransactionRefundWarning />
             </DashboardCard.Content>
           </Box>

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<number | null>(null);
 
   const datagridErrors: OrderRefundTransactionDatagridError[] = errors
@@ -289,18 +293,23 @@ const OrderTransactionRefundPage = ({
           </DashboardCard>
           <OrderTransactionTiles transactions={order?.transactions} control={control} />
         </DetailPageLayout.Content>
-        <DetailPageLayout.RightSidebar>
-          <Box __width="400px" display="flex" flexDirection="column" height="100%">
+        <DetailPageLayout.RightSidebar
+          gridRow={{
+            mobile: "6",
+            tablet: "6",
+            desktop: "full",
+          }}
+        >
+          <Box __width="400px" display="flex" flexDirection="column" height="100%" gap={8}>
             <OrderTransactionSummary
               amountError={amountError || formErrors.amount}
               control={control}
               selectedProductsValue={selectedProductsValue}
               canRefundShipping={canRefundShipping(order, draftRefund)}
               shippingCost={order?.shippingPrice.gross}
               currency={order?.total.gross.currency}
-              marginBottom={12}
             />
-            <Box marginBottom={12}>
+            <Box>
               <DashboardCard>
                 <DashboardCard.Header>
                   <DashboardCard.Title>Refund reason</DashboardCard.Title>