Fix visual regressions on refund with line items view

.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.

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>