Merge branch 'master' of https://github.com/inventree/InvenTree into matmair/issue6281

.github/workflows/docker.yaml

@@ -130,7 +130,7 @@ jobs:
           rm -rf InvenTree/_testfolder
       - name: Set up QEMU
         if: github.event_name != 'pull_request'
-        uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # pin@v3.2.0
+        uses: docker/setup-qemu-action@53851d14592bedcffcf25ea515637cff71ef929a # pin@v3.3.0
       - name: Set up Docker Buildx
         if: github.event_name != 'pull_request'
         uses: docker/setup-buildx-action@6524bf65af31da8d45b59e8c27de4bd072b392f5 # pin@v3.8.0

.github/workflows/qc_checks.yaml

@@ -148,7 +148,7 @@ jobs:
       - name: Export API Documentation
         run: invoke dev.schema --ignore-warnings --filename src/backend/InvenTree/schema.yml
       - name: Upload schema
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # pin@v4.5.0
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # pin@v4.6.0
         with:
           name: schema.yml
           path: src/backend/InvenTree/schema.yml
@@ -219,7 +219,7 @@ jobs:
           echo "Version: $version"
           mkdir export/${version}
           mv schema.yml export/${version}/api.yaml
-      - uses: stefanzweifel/git-auto-commit-action@8621497c8c39c72f3e2a999a26b4ca1b5058a842 # pin@v5.0.1
+      - uses: stefanzweifel/git-auto-commit-action@e348103e9026cc0eee72ae06630dbe30c8bf7a79 # pin@v5.1.0
         name: Commit schema changes
         with:
           commit_message: "Update API schema for ${{ env.version }} / ${{ github.sha }}"
@@ -550,7 +550,7 @@ jobs:
       - name: Run Playwright tests
         id: tests
         run: cd src/frontend && npx nyc playwright test
-      - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # pin@v4.5.0
+      - uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # pin@v4.6.0
         if: ${{ !cancelled() && steps.tests.outcome == 'failure' }}
         with:
           name: playwright-report
@@ -597,7 +597,7 @@ jobs:
         run: |
           cd src/backend/InvenTree/web/static
           zip -r frontend-build.zip web/ web/.vite
-      - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # pin@v4.5.0
+      - uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # pin@v4.6.0
         with:
           name: frontend-build
           path: src/backend/InvenTree/web/static/web
@@ -622,7 +622,7 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Upload SARIF file
-        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # pin@v3
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # pin@v3
         with:
           sarif_file: results.sarif
           category: zizmor

.github/workflows/scorecard.yaml

@@ -59,7 +59,7 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
         with:
           name: SARIF file
           path: results.sarif
@@ -67,6 +67,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           sarif_file: results.sarif

src/frontend/src/components/details/Details.tsx

@@ -378,18 +378,22 @@ export function DetailsTableField({
 
   return (
     <Table.Tr style={{ verticalAlign: 'top' }}>
+      <Table.Td style={{ minWidth: 75, lineBreak: 'auto', flex: 2 }}>
+        <Group gap='xs' wrap='nowrap'>
+          <InvenTreeIcon
+            icon={field.icon ?? (field.name as InvenTreeIconType)}
+          />
+          <Text style={{ paddingLeft: 10 }}>{field.label}</Text>
+        </Group>
+      </Table.Td>
       <Table.Td
         style={{
-          width: '50',
+          lineBreak: 'anywhere',
-          maxWidth: '50'
+          minWidth: 100,
+          flex: 10,
+          display: 'inline-block'
         }}
       >
-        <InvenTreeIcon icon={field.icon ?? (field.name as InvenTreeIconType)} />
-      </Table.Td>
-      <Table.Td style={{ maxWidth: '65%', lineBreak: 'auto' }}>
-        <Text>{field.label}</Text>
-      </Table.Td>
-      <Table.Td style={{ lineBreak: 'anywhere' }}>
         <FieldType field_data={field} field_value={fieldValue} />
       </Table.Td>
       <Table.Td style={{ width: '50' }}>
@@ -409,7 +413,11 @@ export function DetailsTable({
   title?: string;
 }>) {
   return (
-    <Paper p='xs' withBorder radius='xs'>
+    <Paper
+      p='xs'
+      withBorder
+      style={{ overflowX: 'hidden', width: '100%', minWidth: 200 }}
+    >
       <Stack gap='xs'>
         {title && <StylishText size='lg'>{title}</StylishText>}
         <Table striped verticalSpacing={5} horizontalSpacing='sm'>

src/frontend/src/components/details/DetailsImage.tsx

@@ -2,6 +2,7 @@ import { Trans, t } from '@lingui/macro';
 import {
   AspectRatio,
   Button,
+  Grid,
   Group,
   Image,
   Overlay,
@@ -421,7 +422,14 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
   return (
     <>
       {downloadImage.modal}
-      <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos='relative'>
+      <Grid.Col span={{ base: 12, sm: 4 }}>
+        <AspectRatio
+          ref={ref}
+          maw={IMAGE_DIMENSION}
+          ratio={1}
+          pos='relative'
+          visibleFrom='xs'
+        >
           <>
             <ApiImage
               src={img}
@@ -446,6 +454,7 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
               )}
           </>
         </AspectRatio>
+      </Grid.Col>
     </>
   );
 }

src/frontend/src/components/details/ItemDetails.tsx

@@ -1,16 +1,15 @@
 import { Paper, SimpleGrid } from '@mantine/core';
-import { useElementSize } from '@mantine/hooks';
 import type React from 'react';
-import { useMemo } from 'react';
 
 export function ItemDetailsGrid(props: React.PropsWithChildren<{}>) {
-  const { ref, width } = useElementSize();
-
-  const cols = useMemo(() => (width > 700 ? 2 : 1), [width]);
-
   return (
     <Paper p='xs'>
-      <SimpleGrid cols={cols} spacing='xs' verticalSpacing='xs' ref={ref}>
+      <SimpleGrid
+        cols={{ base: 1, '900px': 2 }}
+        type='container'
+        spacing='xs'
+        verticalSpacing='xs'
+      >
         {props.children}
       </SimpleGrid>
     </Paper>

src/frontend/src/components/items/MenuLinks.tsx

@@ -53,7 +53,12 @@ export function MenuLinks({
         <Divider />
         <StylishText size='md'>{title}</StylishText>
         <Divider />
-        <SimpleGrid cols={2} spacing={0} p={3}>
+        <SimpleGrid
+          cols={{ base: 1, '400px': 2 }}
+          type='container'
+          spacing={0}
+          p={3}
+        >
           {visibleLinks.map((item) => (
             <Tooltip
               key={`menu-link-tooltip-${item.id}`}

src/frontend/src/components/nav/PageDetail.tsx

@@ -1,7 +1,8 @@
-import { Group, Paper, Space, Stack, Text } from '@mantine/core';
+import { Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { Fragment, type ReactNode } from 'react';
+import { Fragment, type ReactNode, useMemo } from 'react';
 
+import { shortenString } from '../../functions/tables';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
 import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';
@@ -51,9 +52,41 @@ export function PageDetail({
     ]
   ]);
 
+  const pageTitleString = useMemo(
+    () =>
+      shortenString({
+        str: title,
+        len: 50
+      }),
+    [title]
+  );
+
+  const description = useMemo(
+    () =>
+      shortenString({
+        str: subtitle,
+        len: 75
+      }),
+    [subtitle]
+  );
+
+  const maxCols = useMemo(() => {
+    let cols = 1;
+
+    if (!!detail) {
+      cols++;
+    }
+
+    if (!!badges) {
+      cols++;
+    }
+
+    return cols;
+  }, [detail, badges]);
+
   return (
     <>
-      <PageTitle title={title} />
+      <PageTitle title={pageTitleString} />
       <Stack gap='xs'>
         {breadcrumbs && breadcrumbs.length > 0 && (
           <BreadcrumbList
@@ -62,8 +95,19 @@ export function PageDetail({
           />
         )}
         <Paper p='xs' radius='xs' shadow='xs'>
-          <Stack gap='xs'>
+          <Group
-            <Group justify='space-between' wrap='nowrap'>
+            justify='space-between'
+            gap='xs'
+            wrap='nowrap'
+            align='flex-start'
+          >
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: Math.min(2, maxCols),
+                lg: Math.min(3, maxCols)
+              }}
+            >
               <Group justify='left' wrap='nowrap'>
                 {imageUrl && (
                   <ApiImage
@@ -72,6 +116,7 @@ export function PageDetail({
                     miw={42}
                     mah={42}
                     maw={42}
+                    visibleFrom='sm'
                   />
                 )}
                 <Stack gap='xs'>
@@ -79,30 +124,33 @@ export function PageDetail({
                   {subtitle && (
                     <Group gap='xs'>
                       {icon}
-                      <Text size='sm' truncate>
+                      <Text size='sm'>{description}</Text>
-                        {subtitle}
-                      </Text>
                     </Group>
                   )}
                 </Stack>
               </Group>
-              <Space />
+              {detail && <div>{detail}</div>}
-              {detail}
+              {badges && (
-              <Group justify='right' gap='xs' wrap='nowrap'>
+                <Group
+                  justify='center'
+                  gap='xs'
+                  align='flex-start'
+                  wrap='nowrap'
+                >
                   {badges?.map((badge, idx) => (
                     <Fragment key={idx}>{badge}</Fragment>
                   ))}
                 </Group>
-              <Space />
+              )}
+            </SimpleGrid>
             {actions && (
-                <Group gap={5} justify='right'>
+              <Group gap={5} justify='right' wrap='nowrap' align='flex-start'>
                 {actions.map((action, idx) => (
                   <Fragment key={idx}>{action}</Fragment>
                 ))}
               </Group>
             )}
           </Group>
-          </Stack>
         </Paper>
       </Stack>
     </>

src/frontend/src/components/settings/FactCollection.tsx

@@ -10,7 +10,15 @@ export function FactCollection({
   minItems?: number;
 }>) {
   return (
-    <SimpleGrid cols={minItems} spacing='xs'>
+    <SimpleGrid
+      cols={{
+        base: 1,
+        sm: Math.min(2, minItems),
+        md: Math.min(3, minItems),
+        lg: minItems
+      }}
+      spacing='xs'
+    >
       {items.map((item, index) => (
         <FactItem
           key={`${index}-${item.value}`}

src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx

@@ -9,7 +9,7 @@ export function AccountContent() {
 
   return (
     <div>
-      <SimpleGrid cols={2} spacing='md'>
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing='md'>
         <Container w='100%'>
           <AccountDetailPanel />
         </Container>

src/frontend/src/pages/build/BuildDetail.tsx

@@ -239,16 +239,14 @@ export default function BuildDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.part}
             apiPath={ApiEndpoints.part_list}
             src={build.part_detail?.image ?? build.part_detail?.thumbnail}
             pk={build.part}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={build} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -145,8 +145,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.purchase_order}
             apiPath={apiUrl(ApiEndpoints.company_list, company.pk)}
@@ -159,8 +158,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
               deleteFile: true
             }}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable item={company} fields={tl} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/company/ManufacturerPartDetail.tsx

@@ -133,8 +133,7 @@ export default function ManufacturerPartDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.part}
             src={manufacturerPart?.part_detail?.image}
@@ -144,8 +143,7 @@ export default function ManufacturerPartDetail() {
             )}
             pk={manufacturerPart?.part_detail?.pk}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable title={t`Part Details`} fields={tl} item={data} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/company/SupplierPartDetail.tsx

@@ -217,8 +217,7 @@ export default function SupplierPartDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.part}
             src={supplierPart?.part_detail?.image}
@@ -228,7 +227,6 @@ export default function SupplierPartDetail() {
             )}
             pk={supplierPart?.part_detail?.pk}
           />
-          </Grid.Col>
           <Grid.Col span={8}>
             <DetailsTable title={t`Part Details`} fields={tl} item={data} />
           </Grid.Col>

src/frontend/src/pages/part/PartDetail.tsx

@@ -5,7 +5,6 @@ import {
   Grid,
   Loader,
   Skeleton,
-  Space,
   Stack,
   Text
 } from '@mantine/core';
@@ -439,8 +438,7 @@ export default function PartDetail() {
 
     return part ? (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.part}
             imageActions={{
@@ -454,8 +452,7 @@ export default function PartDetail() {
             refresh={refreshInstance}
             pk={part.pk}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={data} />
           </Grid.Col>
         </Grid>
@@ -1040,9 +1037,7 @@ export default function PartDetail() {
                     }}
                   />
                 </Stack>
-              ) : (
+              ) : null
-                <Space />
-              )
             }
           />
           <PanelGroup

src/frontend/src/pages/part/PartSchedulingDetail.tsx

@@ -243,7 +243,7 @@ export default function PartSchedulingDetail({
           <Text>{t`There is no scheduling information available for the selected part`}</Text>
         </Alert>
       )}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           url={apiUrl(ApiEndpoints.part_scheduling, part.pk)}
           tableState={table}

src/frontend/src/pages/part/PartStocktakeDetail.tsx

@@ -209,7 +209,7 @@ export default function PartStocktakeDetail({
       {generateReport.modal}
       {editStocktakeEntry.modal}
       {deleteStocktakeEntry.modal}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           url={apiUrl(ApiEndpoints.part_stocktake_list)}
           tableState={table}

src/frontend/src/pages/part/pricing/BomPricingPanel.tsx

@@ -219,7 +219,7 @@ export default function BomPricingPanel({
 
   return (
     <Stack gap='xs'>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={apiUrl(ApiEndpoints.bom_list)}

src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -151,7 +151,7 @@ export default function PriceBreakPanel({
       {newPriceBreak.modal}
       {editPriceBreak.modal}
       {deletePriceBreak.modal}
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={tableUrl}

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -240,7 +240,7 @@ export default function PricingOverviewPanel({
     <>
       {editPricing.modal}
       <Stack gap='xs'>
-        <SimpleGrid cols={2}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
           <Stack gap='xs'>
             <Paper p='xs'>
               <Group justify='space-between' wrap='nowrap'>

src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx

@@ -103,7 +103,7 @@ export default function PurchaseHistoryPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         tableState={table}
         url={apiUrl(ApiEndpoints.purchase_order_line_list)}

src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx

@@ -63,7 +63,7 @@ export default function SaleHistoryPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         tableState={table}
         url={apiUrl(ApiEndpoints.sales_order_line_list)}

src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx

@@ -45,7 +45,7 @@ export default function SupplierPricingPanel({
   }, [table.records]);
 
   return (
-    <SimpleGrid cols={2}>
+    <SimpleGrid cols={{ base: 1, md: 2 }}>
       <InvenTreeTable
         url={apiUrl(ApiEndpoints.supplier_part_pricing_list)}
         columns={columns}

src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx

@@ -73,7 +73,7 @@ export default function VariantPricingPanel({
 
   return (
     <Stack gap='xs'>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <InvenTreeTable
           tableState={table}
           url={apiUrl(ApiEndpoints.part_list)}

src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx

@@ -263,16 +263,14 @@ export default function PurchaseOrderDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.purchase_order}
             apiPath={ApiEndpoints.company_list}
             src={order.supplier_detail?.image}
             pk={order.supplier}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={order} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/sales/ReturnOrderDetail.tsx

@@ -233,16 +233,14 @@ export default function ReturnOrderDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.purchase_order}
             apiPath={ApiEndpoints.company_list}
             src={order.customer_detail?.image}
             pk={order.customer}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={order} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/sales/SalesOrderDetail.tsx

@@ -243,16 +243,14 @@ export default function SalesOrderDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.purchase_order}
             apiPath={ApiEndpoints.company_list}
             src={order.customer_detail?.image}
             pk={order.customer}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={order} />
           </Grid.Col>
         </Grid>

src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx

@@ -175,8 +175,7 @@ export default function SalesOrderShipmentDetail() {
     return (
       <>
         <ItemDetailsGrid>
-          <Grid>
+          <Grid grow>
-            <Grid.Col span={4}>
             <DetailsImage
               appRole={UserRoles.sales_order}
               apiPath={ApiEndpoints.company_list}
@@ -189,8 +188,7 @@ export default function SalesOrderShipmentDetail() {
                 deleteFile: false
               }}
             />
-            </Grid.Col>
+            <Grid.Col span={{ base: 12, sm: 8 }}>
-            <Grid.Col span={8}>
               <DetailsTable fields={tl} item={data} />
             </Grid.Col>
           </Grid>

src/frontend/src/pages/stock/StockDetail.tsx

@@ -346,19 +346,16 @@ export default function StockDetail() {
 
     return (
       <ItemDetailsGrid>
-        <Grid>
+        <Grid grow>
-          <Grid.Col span={4}>
           <DetailsImage
             appRole={UserRoles.part}
             apiPath={ApiEndpoints.part_list}
             src={
-                stockitem.part_detail?.image ??
+              stockitem.part_detail?.image ?? stockitem?.part_detail?.thumbnail
-                stockitem?.part_detail?.thumbnail
             }
             pk={stockitem.part}
           />
-          </Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 8 }}>
-          <Grid.Col span={8}>
             <DetailsTable fields={tl} item={data} />
           </Grid.Col>
         </Grid>