github-starred/pangolin
2
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-08 21:59:09 -05:00
Code Issues 564 Packages Projects Releases 72 Wiki Activity

[PR #1931] [CLOSED] Fix resources card table header mobile responsiveness #2766

New Issue
Closed
opened 2026-04-16 09:35:37 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-16 09:35:37 -05:00
Owner
Copy Link

📋 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)

  • 05fb258 Fix resources card table header for mobile / tablets when enableClients flag is enabled
  • 60cac42 Use css grid instead
  • 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:
manage-resource-mobile-in-chrome

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

manage-resource-fix-mobile-in-chrome

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: ![manage-resource-mobile-in-chrome](https://github.com/user-attachments/assets/416a4642-b8f3-45fb-b52d-d149bbf08234) After the fix - I have tested it with Chrome on Iphone 13 Pro: ![manage-resource-fix-mobile-in-chrome](https://github.com/user-attachments/assets/9552bb80-bee0-496f-8513-d84431fbf480) 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>
GiteaMirror added the pull-request label 2026-04-16 09:35:37 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
api
authentication
bug
config
dependencies
docker
documentation
enhancement
good first issue
help wanted
Improvement
Look Into
needs investigating
networking
new feature
non-critical bug
potential bug
pull-request
Mirrored from GitHub Pull Request
 question
reverse proxy
Security
stale
ui
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/pangolin#2766
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?