Fix resource table card header responsive issues #593

New Issue

MrUnknownDE · 2026-04-05T17:24:25+02:00

MrUnknownDE commented

2026-04-05 17:24:25 +02:00

Originally created by @filipe-costa on 11/27/2025

Community Contribution License Agreement

By creating this pull request, I grant the project maintainers an unlimited,
perpetual license to use, modify, and redistribute these contributions under any terms they
choose, including both the AGPLv3 and the Fossorial Commercial license terms. I
represent that I have the right to grant this license for all contributed content.

Description

When viewing the "Manage Resources" page on mobile and when they are available clients, i.e. enableClients flag is true - the Proxy and Client resources tab list buttons would end up overlapping itself.

I took the opportunity to use CSS Grid instead of flex box since I wanted to have more granular control over both axis - and at different breakpoints.

I did a local docker build in my own VPS environment to showcase this:

Before the fix - I have tested it with Chrome on Iphone 13 Pro:

After the fix - I have tested it with Chrome on Iphone 13 Pro:

I have also tested in the following mobile browsers:

Firefox
Safari

How to test?

In src/lib/pullEnv.ts, and set the key enableClients to be true.
Use different browsers on Desktop using the Responsive Design Mode at different breakpoints.

*Originally created by @filipe-costa on 11/27/2025* ## Community Contribution License Agreement By creating this pull request, I grant the project maintainers an unlimited, perpetual license to use, modify, and redistribute these contributions under any terms they choose, including both the AGPLv3 and the Fossorial Commercial license terms. I represent that I have the right to grant this license for all contributed content. ## Description When viewing the "Manage Resources" page on mobile and when they are available clients, i.e. `enableClients` flag is true - the `Proxy` and `Client` resources tab list buttons would end up overlapping itself. I took the opportunity to use CSS Grid instead of flex box since I wanted to have more granular control over both axis - and at different breakpoints. I did a local docker build in my own VPS environment to showcase this: Before the fix - I have tested it with Chrome on Iphone 13 Pro: <img src="https://github.com/user-attachments/assets/416a4642-b8f3-45fb-b52d-d149bbf08234" width="300"> After the fix - I have tested it with Chrome on Iphone 13 Pro: <img src="https://github.com/user-attachments/assets/9552bb80-bee0-496f-8513-d84431fbf480" width="300"> I have also tested in the following mobile browsers: - Firefox - Safari ## How to test? - In `src/lib/pullEnv.ts`, and set the key `enableClients` to be `true`. - Use different browsers on Desktop using the Responsive Design Mode at different breakpoints.

MrUnknownDE closed this issue

2026-04-05 17:24:25 +02:00

Sign in to join this conversation.

Branches Tags

main

dev

dependabot/npm_and_yarn/dev-minor-updates-b4e5d6b9c5

revert-2766-feature/systemd-install-instructions

dependabot/npm_and_yarn/prod-patch-updates-05702d39f2

dependabot/npm_and_yarn/next-16.2.1

dependabot/npm_and_yarn/recharts-3.8.1

alerting-rules

private-site-ha

dependabot/docker/docker/library/node-25-slim

ssh

delete-account

msg-delivery

org-only-idp

cicd

patch

site-targets-auto-login

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/pangolin#593