[PR #149] [MERGED] refactor: optimize UI button layout and fix dependency loop #240

New issue

Closed

opened 2026-02-26 12:40:43 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 12:40:43 +03:00

Owner

📋 Pull Request Information

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

Base: main ← Head: fix/button_placement

📝 Commits (1)

7315f81 refactor: optimize UI button layout and fix dependency loop

📊 Changes

2 files changed (+22 additions, -15 deletions)

View changed files

📝 src/app/_components/InstalledScriptsTab.tsx (+18 -13)
📝 src/server/api/routers/installedScripts.ts (+4 -2)

📄 Description

Summary

This PR optimizes the UI button layout in the installed scripts table and fixes a dependency array loop issue.

Changes Made

UI Improvements

Added Open UI button next to IP:Port in the installed scripts table
Moved Re-detect button to Actions dropdown for better space usage and cleaner layout
Hide buttons for stopped containers to prevent invalid actions
Improved font consistency by removing monospace from IP:Port text
Enhanced auto-detect success message with LXC ID and hostname for better context

Bug Fixes

Fixed dependency array loop in fetchContainerStatuses useCallback that was causing infinite re-renders
Optimized button rendering to only show when container status is confirmed as running

UX Improvements

Better screen real estate usage with cleaner, more scannable layout
Logical button grouping with primary actions visible and utility functions in dropdown
Consistent styling across all action buttons

Testing

Buttons only appear for running containers
Open UI button works correctly
Re-detect button accessible via Actions dropdown
No more dependency loop causing performance issues
Enhanced success messages display properly

Screenshots

The interface now has a much cleaner layout with better space utilization and improved 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/149 **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/button_placement` --- ### 📝 Commits (1) - [`7315f81`](https://github.com/community-scripts/ProxmoxVE-Local/commit/7315f81304362d4f3ffbe2de66c4d6b30c3f8bdb) refactor: optimize UI button layout and fix dependency loop ### 📊 Changes **2 files changed** (+22 additions, -15 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/InstalledScriptsTab.tsx` (+18 -13) 📝 `src/server/api/routers/installedScripts.ts` (+4 -2) </details> ### 📄 Description ## Summary This PR optimizes the UI button layout in the installed scripts table and fixes a dependency array loop issue. ## Changes Made ### UI Improvements - **Added Open UI button** next to IP:Port in the installed scripts table - **Moved Re-detect button** to Actions dropdown for better space usage and cleaner layout - **Hide buttons for stopped containers** to prevent invalid actions - **Improved font consistency** by removing monospace from IP:Port text - **Enhanced auto-detect success message** with LXC ID and hostname for better context ### Bug Fixes - **Fixed dependency array loop** in fetchContainerStatuses useCallback that was causing infinite re-renders - **Optimized button rendering** to only show when container status is confirmed as running ### UX Improvements - **Better screen real estate usage** with cleaner, more scannable layout - **Logical button grouping** with primary actions visible and utility functions in dropdown - **Consistent styling** across all action buttons ## Testing - [x] Buttons only appear for running containers - [x] Open UI button works correctly - [x] Re-detect button accessible via Actions dropdown - [x] No more dependency loop causing performance issues - [x] Enhanced success messages display properly ## Screenshots The interface now has a much cleaner layout with better space utilization and improved user experience. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>