Reduce vertical padding in dashboard table rows for more compact layout

[leccelecce]

What does this PR do?

This PR reduces the vertical padding on table cells on the router, middleware and services pages.

You can see before and after images on #12132

Motivation

I raised in #12132 the fact that there is too much unused space which doesn't make good use of screen real estate. It was agreed this could be a sensible change.

Other notes

The default styling seems to come from the Faency library here: https://github.com/traefik/faency/blob/2998bd08454a830f29e5c5d1feead56d994db960/components/Table/Table.tsx#L61

I couldn't see a more straightforward way to customise the padding across multiple pages than creating my own SlimmerAriaTd component. This may well not be the best approach! Happy to look at alternatives if required.

[leccelecce]

The test failures I believe are unrelated to this PR (they are in the load balancer area, and these are Web UI only changes)...

[gndz07]

Hello @leccelecce, thank you for the PR, it looks great! I just have a suggestion on a simpler approach to apply this change globally across the dashboard.

Faency has a function called globalCss, which could be called to override the default styling. I think we can target the AriaTd component and override the default padding. For example:

// App.tsx

import { globalCss } from '@traefiklabs/faency'

const customGlobalStyle = globalCss({
  'span[role=cell]': {     // target the AriaTd component
    p: '$2 $3'
  },
})

const App = () => {
  return (
    <FaencyProvider>
       <HashRouter basename={import.meta.env.VITE_APP_BASE_URL || ''}>
          {customGlobalStyle()}     // call the custom style function
          <Routes />
       </HashRouter>
    </FaencyProvider>
  )
}

This way, the custom padding will be applied to all AriaTd components across the dashboard without the need to replace the components one by one 🙂

[leccelecce]

Thank you for your review! I am happy to take whatever approach is preferred.

My only query is whether this approach of direct CSS overrides is a little brittle, because if Faency is future changes from building a table using span[role=cell] this CSS override won't be effective anymore. But I have no familiarity with the library so happy to take your judgement.

[gndz07]

@leccelecce I believe this approach should be safe enough to be taken. If in the future there will be a drastic change on Faency that wouldn't allow us to use this CSS override anymore, then it should be a breaking change and we will have chances to adjust accordingly. But in theory, we would like to avoid this kind of breaking changes because it's one of the core functions of the library 🙂

[leccelecce]

OK, new approach in place, all tables now look like this:

[rtribotte]

Thanks!

[kevinpollet]

LGTM

[traefiker]

🚫 checks status: PR status: cancelled

[traefiker]

🚫 checks status: PR status: cancelled

[traefiker]

🚫 checks status: PR status: failure

[leccelecce]

Thank you guys for accepting the PR, much appreciated !