[PR #5195] [MERGED] Refactor layout and component styles for improved responsiveness #5373

Closed
opened 2026-02-26 14:33:56 +03:00 by kerem · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE/pull/5195
Author: @BramSuurdje
Created: 6/16/2025
Status: Merged
Merged: 6/16/2025
Merged by: @michelroegl-brunner

Base: mainHead: update-sidebar-frontend


📝 Commits (2)

  • 120dac2 Refactor layout and component styles for improved responsiveness
  • 6e66120 Fix border opacity in ScriptItem component for consistent styling

📊 Changes

6 files changed (+8 additions, -8 deletions)

View changed files

📝 frontend/src/app/layout.tsx (+1 -1)
📝 frontend/src/app/scripts/_components/ScriptAccordion.tsx (+1 -1)
📝 frontend/src/app/scripts/_components/ScriptItem.tsx (+2 -2)
📝 frontend/src/app/scripts/_components/Sidebar.tsx (+2 -2)
📝 frontend/src/app/scripts/page.tsx (+1 -1)
📝 frontend/src/components/Navbar.tsx (+1 -1)

📄 Description

✍️ Description

This pull request focuses on improving the layout and styling consistency across various components in the frontend application. The changes primarily involve updates to container widths, spacing, and borders to enhance responsiveness and visual alignment.

Layout and Width Adjustments:

Spacing and Margin Refinements:

Border and Styling Updates:

Link: #

Prerequisites (X in brackets)

  • Self-review completed – Code follows project standards.
  • Tested thoroughly – Changes work as expected.
  • No security risks – No hardcoded secrets, unnecessary privilege escalations, or permission issues.

🛠️ Type of Change (X in brackets)

  • 🐞 Bug fix – Resolves an issue without breaking functionality.
  • New feature – Adds new, non-breaking functionality.
  • 💥 Breaking change – Alters existing functionality in a way that may require updates.
  • 🆕 New script – A fully functional and tested script or script set.
  • 🌍 Website update – Changes to website-related JSON files or metadata.
  • 🔧 Refactoring / Code Cleanup – Improves readability or maintainability without changing functionality.
  • 📝 Documentation update – Changes to README, AppName.md, CONTRIBUTING.md, or other docs.

before:
image

after:
image


🔄 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/community-scripts/ProxmoxVE/pull/5195 **Author:** [@BramSuurdje](https://github.com/BramSuurdje) **Created:** 6/16/2025 **Status:** ✅ Merged **Merged:** 6/16/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `update-sidebar-frontend` --- ### 📝 Commits (2) - [`120dac2`](https://github.com/community-scripts/ProxmoxVE/commit/120dac27d3f5dc2cf35d405de1f8db8f2970b336) Refactor layout and component styles for improved responsiveness - [`6e66120`](https://github.com/community-scripts/ProxmoxVE/commit/6e66120826c0eb95fc9e866d9194ca3728cf92e8) Fix border opacity in ScriptItem component for consistent styling ### 📊 Changes **6 files changed** (+8 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/app/layout.tsx` (+1 -1) 📝 `frontend/src/app/scripts/_components/ScriptAccordion.tsx` (+1 -1) 📝 `frontend/src/app/scripts/_components/ScriptItem.tsx` (+2 -2) 📝 `frontend/src/app/scripts/_components/Sidebar.tsx` (+2 -2) 📝 `frontend/src/app/scripts/page.tsx` (+1 -1) 📝 `frontend/src/components/Navbar.tsx` (+1 -1) </details> ### 📄 Description <!--🛑 New scripts must be submitted to [ProxmoxVED](https://github.com/community-scripts/ProxmoxVED) for testing. PRs without prior testing will be closed. --> ## ✍️ Description This pull request focuses on improving the layout and styling consistency across various components in the frontend application. The changes primarily involve updates to container widths, spacing, and borders to enhance responsiveness and visual alignment. ### Layout and Width Adjustments: * Updated the maximum width of the main layout container to `1440px` for better alignment with modern screen sizes (`frontend/src/app/layout.tsx`, [frontend/src/app/layout.tsxL107-R107](diffhunk://#diff-f3bfc5eb8ab49540cf25bb4422d423fac9a4e15f744eb2e2d3b2e1a1b03e441fL107-R107)). * Adjusted the maximum width of the `Navbar` container to `1440px` for consistency with the main layout (`frontend/src/components/Navbar.tsx`, [frontend/src/components/Navbar.tsxL37-R37](diffhunk://#diff-417a97ce505dbbb983da7835091f1beaf28c843d74c83ef9fddcba8f8e2332f1L37-R37)). * Modified the minimum and maximum widths of the `Sidebar` to `350px` for improved usability on larger screens (`frontend/src/app/scripts/_components/Sidebar.tsx`, [frontend/src/app/scripts/_components/Sidebar.tsxL25-R25](diffhunk://#diff-f907406a605cef175a92b4353b3138bba39cc4c6507c0791eb1a25ec8fbcdb28L25-R25)). ### Spacing and Margin Refinements: * Reduced the horizontal margin in the `ScriptContent` component from `7` to `4` for better spacing on smaller devices (`frontend/src/app/scripts/page.tsx`, [frontend/src/app/scripts/page.tsxL50-R50](diffhunk://#diff-5a9c3dc7a12c4b4ad906f37a76aea08c1425cdd16fbd7c240615865ffd4d453fL50-R50)). * Removed the top margin from the `ScriptAccordion` component to streamline its appearance (`frontend/src/app/scripts/_components/ScriptAccordion.tsx`, [frontend/src/app/scripts/_components/ScriptAccordion.tsxL59-R59](diffhunk://#diff-8737df428a29f2d126056300690f99402e331e7f03d3143bd6afdda418cf95b5L59-R59)). ### Border and Styling Updates: * Removed the transparency from the border in the `ScriptItem` component to ensure consistent visibility across themes (`frontend/src/app/scripts/_components/ScriptItem.tsx`, [frontend/src/app/scripts/_components/ScriptItem.tsxL135-R135](diffhunk://#diff-8211dae113b207283321d206905609d73b1aa3e743d4f716e01d02b9db590438L135-R135)). * Simplified the `max-w` constraint in the `ScriptItem` container for a more flexible layout (`frontend/src/app/scripts/_components/ScriptItem.tsx`, [frontend/src/app/scripts/_components/ScriptItem.tsxL123-R123](diffhunk://#diff-8211dae113b207283321d206905609d73b1aa3e743d4f716e01d02b9db590438L123-R123)). ## 🔗 Related PR / Issue Link: # ## ✅ Prerequisites (**X** in brackets) - [x] **Self-review completed** – Code follows project standards. - [x] **Tested thoroughly** – Changes work as expected. - [x] **No security risks** – No hardcoded secrets, unnecessary privilege escalations, or permission issues. --- ## 🛠️ Type of Change (**X** in brackets) - [ ] 🐞 **Bug fix** – Resolves an issue without breaking functionality. - [ ] ✨ **New feature** – Adds new, non-breaking functionality. - [ ] 💥 **Breaking change** – Alters existing functionality in a way that may require updates. - [ ] 🆕 **New script** – A fully functional and tested script or script set. - [ ] 🌍 **Website update** – Changes to website-related JSON files or metadata. - [ ] 🔧 **Refactoring / Code Cleanup** – Improves readability or maintainability without changing functionality. - [ ] 📝 **Documentation update** – Changes to `README`, `AppName.md`, `CONTRIBUTING.md`, or other docs. before: ![image](https://github.com/user-attachments/assets/95f17713-44ff-45a0-a2a2-d8c86807ca0d) after: ![image](https://github.com/user-attachments/assets/6c61f941-96d4-4e6c-8f52-48a219bf4e07) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
kerem 2026-02-26 14:33:56 +03:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/ProxmoxVE#5373
No description provided.