553c33a Use dynamic css styles to set grid columns for "lg" breakpoint
📊 Changes
1 file changed (+181 additions, -139 deletions)
View changed files
📝src/components/ResourcesTable.tsx (+181 -139)
📄 Description
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.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/fosrl/pangolin/pull/1931
**Author:** [@filipe-costa](https://github.com/filipe-costa)
**Created:** 11/27/2025
**Status:** ❌ Closed
**Base:** `main` ← **Head:** `fix-resources-card-table-header-mobile-responsiveness`
---
### 📝 Commits (3)
- [`05fb258`](https://github.com/fosrl/pangolin/commit/05fb25869bf9df4e0aded3aff0c1575c43d33b12) Fix resources card table header for mobile / tablets when enableClients flag is enabled
- [`60cac42`](https://github.com/fosrl/pangolin/commit/60cac42813f6fa1d24159532f10b01fa079dd5c6) Use css grid instead
- [`553c33a`](https://github.com/fosrl/pangolin/commit/553c33a1a905136f4fe897e6cdfe4019db3d0769) Use dynamic css styles to set grid columns for "lg" breakpoint
### 📊 Changes
**1 file changed** (+181 additions, -139 deletions)
<details>
<summary>View changed files</summary>
📝 `src/components/ResourcesTable.tsx` (+181 -139)
</details>
### 📄 Description
## 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.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/fosrl/pangolin/pull/1931
Author: @filipe-costa
Created: 11/27/2025
Status: ❌ Closed
Base:
main← Head:fix-resources-card-table-header-mobile-responsiveness📝 Commits (3)
05fb258Fix resources card table header for mobile / tablets when enableClients flag is enabled60cac42Use css grid instead553c33aUse dynamic css styles to set grid columns for "lg" breakpoint📊 Changes
1 file changed (+181 additions, -139 deletions)
View changed files
📝
src/components/ResourcesTable.tsx(+181 -139)📄 Description
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.
enableClientsflag is true - theProxyandClientresources 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:
How to test?
src/lib/pullEnv.ts, and set the keyenableClientsto betrue.🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.