SVI/ProxmoxVE-Local
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE-Local.git synced 2026-03-31 06:23:54 -04:00
Code Issues 56 Packages Projects Releases 7 Wiki Activity

[PR #138] [MERGED] UI/UX Improvements and Bug Fixes #206

New Issue
Closed
opened 2025-11-20 04:13:31 -05:00 by saavagebueno · 0 comments
saavagebueno commented 2025-11-20 04:13:31 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/community-scripts/ProxmoxVE-Local/pull/138
Author: @michelroegl-brunner
Created: 10/14/2025
Status: ✅ Merged
Merged: 10/14/2025
Merged by: @michelroegl-brunner

Base: main ← Head: fix/var-ui-fixes

📝 Commits (7)

  • 2aaae1e Improve navigation layout: reduce spacing and move help icons inside nav buttons
  • 7f2fce9 Enhance stop/destroy button hover effects and colors
  • d8d5776 Fix input field alignment in editing mode
  • fbf9e39 Improve button styling on available scripts page
  • 8835aba Reduce footer size by approximately 50%
  • 6d737e5 Add tab persistence with localStorage
  • 4a37e51 Clean up code: remove unused comments and variables

📊 Changes

5 files changed (+95 additions, -85 deletions)

View changed files

📝 src/app/_components/Footer.tsx (+4 -4)
📝 src/app/_components/InstalledScriptsTab.tsx (+17 -16)
📝 src/app/_components/ScriptsGrid.tsx (+9 -6)
📝 src/app/page.tsx (+63 -56)
📝 src/server/api/routers/installedScripts.ts (+2 -3)

📄 Description

Summary

This PR includes several UI/UX improvements and bug fixes for the PVE Scripts Local application.

Changes Made

Navigation Improvements

  • Reduced spacing between navigation items for more compact layout
  • Moved help icons inside navigation buttons for better UX
  • Simplified structure by removing unnecessary wrapper divs

Button Styling Enhancements

  • Download button: Made smaller and less colorful with subtle blue theme
  • Action buttons: Updated Clear Selection and Select All Visible to match Settings button styling
  • Stop/Destroy buttons: Enhanced with scaling and shadow hover effects, plus vibrant color coding

Input Field Alignment Fixes

  • Fixed vertical alignment of script name and container ID input fields in editing mode
  • Removed script path line during editing for cleaner interface
  • Consistent styling with proper min-height and flex centering

Footer Improvements

  • Reduced footer size by approximately 50% (py-6 to py-3)
  • Tighter spacing between elements for more compact layout
  • Better screen utilization for main content

Tab Persistence

  • Added localStorage persistence for active tab selection
  • Tab selection survives page reloads and browser sessions
  • SSR compatible with proper browser environment checks

Code Cleanup

  • Removed unnecessary comments and unused variables
  • Improved code readability and maintainability

Testing

  • All functionality tested and working correctly
  • Responsive design maintained across different screen sizes
  • No breaking changes introduced

Screenshots

The UI improvements provide a more polished and professional appearance with better user experience.

🔄 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-Local/pull/138 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/14/2025 **Status:** ✅ Merged **Merged:** 10/14/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `fix/var-ui-fixes` --- ### 📝 Commits (7) - [`2aaae1e`](https://github.com/community-scripts/ProxmoxVE-Local/commit/2aaae1e67bb2263f5fd822a9ceecf03329e78467) Improve navigation layout: reduce spacing and move help icons inside nav buttons - [`7f2fce9`](https://github.com/community-scripts/ProxmoxVE-Local/commit/7f2fce95c141fe69bbcdd9640b67c49020c86f7f) Enhance stop/destroy button hover effects and colors - [`d8d5776`](https://github.com/community-scripts/ProxmoxVE-Local/commit/d8d5776bb728042b5dab298a3b6590112bf2bf06) Fix input field alignment in editing mode - [`fbf9e39`](https://github.com/community-scripts/ProxmoxVE-Local/commit/fbf9e399db6a68de02b035b587ec718d0a0fea94) Improve button styling on available scripts page - [`8835aba`](https://github.com/community-scripts/ProxmoxVE-Local/commit/8835abad152f9c8e6a0b11c1f9e52b1bce3d9c2c) Reduce footer size by approximately 50% - [`6d737e5`](https://github.com/community-scripts/ProxmoxVE-Local/commit/6d737e54bc3a52bbeddc2fe79ac0244d80aa02f2) Add tab persistence with localStorage - [`4a37e51`](https://github.com/community-scripts/ProxmoxVE-Local/commit/4a37e51d4d32ffed932466f483e6b3941ecb62d9) Clean up code: remove unused comments and variables ### 📊 Changes **5 files changed** (+95 additions, -85 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/Footer.tsx` (+4 -4) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+17 -16) 📝 `src/app/_components/ScriptsGrid.tsx` (+9 -6) 📝 `src/app/page.tsx` (+63 -56) 📝 `src/server/api/routers/installedScripts.ts` (+2 -3) </details> ### 📄 Description ## Summary This PR includes several UI/UX improvements and bug fixes for the PVE Scripts Local application. ## Changes Made ### Navigation Improvements - **Reduced spacing** between navigation items for more compact layout - **Moved help icons inside** navigation buttons for better UX - **Simplified structure** by removing unnecessary wrapper divs ### Button Styling Enhancements - **Download button**: Made smaller and less colorful with subtle blue theme - **Action buttons**: Updated Clear Selection and Select All Visible to match Settings button styling - **Stop/Destroy buttons**: Enhanced with scaling and shadow hover effects, plus vibrant color coding ### Input Field Alignment Fixes - **Fixed vertical alignment** of script name and container ID input fields in editing mode - **Removed script path line** during editing for cleaner interface - **Consistent styling** with proper min-height and flex centering ### Footer Improvements - **Reduced footer size** by approximately 50% (py-6 to py-3) - **Tighter spacing** between elements for more compact layout - **Better screen utilization** for main content ### Tab Persistence - **Added localStorage persistence** for active tab selection - **Tab selection survives** page reloads and browser sessions - **SSR compatible** with proper browser environment checks ### Code Cleanup - Removed unnecessary comments and unused variables - Improved code readability and maintainability ## Testing - All functionality tested and working correctly - Responsive design maintained across different screen sizes - No breaking changes introduced ## Screenshots The UI improvements provide a more polished and professional appearance with better user experience. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
saavagebueno added the pull-request label 2025-11-20 04:13:31 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
enhancement
feature
in progress
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
saavagebueno
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: SVI/ProxmoxVE-Local#206
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?