How to change the breakpoint at which changelist table becomes stacked?

In Unfold admin, the changelist table switches to a stacked layout on small screens — likely due to Tailwind classes like block and lg:table.

I’d like to change the breakpoint at which this layout switch happens (for example, use md instead of lg, or disable it entirely to keep horizontal scrolling).

How can this behavior be customized or overridden cleanly?

Para alterar o breakpoint de lg para md, altere a classe para md:table. Para impedir a pilha, remova block e aplique table sempre.

Se for trabahar com o CSS, pode alterar o padrão usando o Tailwind's @apply:

.custom-changelist-table {
@apply table md:table;
}

The Unfold table component contains hardcoded classes, so the breakpoint is fixed at lg. You have two options.

First, you can redefine the lg breakpoint in Tailwind CSS. However, this will affect the appearance across the entire project, not just the table component.

@import "tailwindcss";

@theme {
  /* You can set a fixed value or use the value of another breakpoint. */
  --breakpoint-lg: theme(--breakpoint-md);
}

Note: It's important to note that by default, breakpoints are defined in rem units. If you want to deviate from this, follow the other referenced answer.

Second, you can try to change the breakpoint behavior specifically within the table component only.

@import "tailwindcss";

@layer base {
  div[data-simplebar] > table.lg\:table {
    /* Set display: table at the new breakpoint */
    @variant xl {
      display: table;
    }

    /* This is only necessary if you need to set a larger breakpoint (in the case of a smaller one, it may still remain valid) */
    @variant lg {
      display: revert; /* Revert changes only in the Unfold table */ 
    }
  }
}

Or:

@import "tailwindcss";

@layer base {
  div[data-simplebar] > table.lg\:table {
    /* Set display: table at the new breakpoint */
    @variant md {
      display: table;
    }
  }
}
Вернуться на верх