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 #76] [MERGED] feat: comprehensive mobile responsiveness improvements #164

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

📋 Pull Request Information

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

Base: main ← Head: feat/ui-responsivnes

📝 Commits (10+)

  • b451b13 feat: comprehensive mobile responsiveness improvements
  • f4fded4 fix: improve mobile terminal input handling for SSH processes
  • 82638b2 debug: add comprehensive debugging for mobile terminal input
  • abb000a debug: add comprehensive server-side debugging for mobile input
  • cefdb30 debug: add WebSocket message routing debugging
  • f75f763 debug: add comprehensive client-side debugging for mobile input
  • e08c652 debug: add WebSocket connection tracking and message debugging
  • f685f46 fix: correct WebSocket message format for keyboard input
  • 592687e debug: add WebSocket connection details for mobile vs keyboard input
  • 9ed298a fix: correct WebSocket message format to use 'input' field

📊 Changes

19 files changed (+1123 additions, -481 deletions)

View changed files

📝 src/app/_components/CategorySidebar.tsx (+4 -4)
📝 src/app/_components/DiffViewer.tsx (+1 -1)
📝 src/app/_components/DownloadedScriptsTab.tsx (+3 -3)
📝 src/app/_components/ExecutionModeModal.tsx (+2 -2)
📝 src/app/_components/FilterBar.tsx (+130 -87)
📝 src/app/_components/InstalledScriptsTab.tsx (+182 -152)
📝 src/app/_components/ScriptDetailModal.tsx (+55 -51)
➕ src/app/_components/ScriptInstallationCard.tsx (+175 -0)
📝 src/app/_components/ScriptsGrid.tsx (+3 -3)
📝 src/app/_components/ServerForm.tsx (+4 -2)
📝 src/app/_components/ServerList.tsx (+43 -36)
📝 src/app/_components/SettingsModal.tsx (+19 -19)
📝 src/app/_components/Terminal.tsx (+284 -44)
📝 src/app/_components/TextViewer.tsx (+1 -1)
📝 src/app/_components/VersionDisplay.tsx (+39 -35)
📝 src/app/layout.tsx (+2 -1)
📝 src/app/page.tsx (+20 -17)
📝 src/server/api/websocket/handler.ts (+84 -23)
📝 src/styles/globals.css (+72 -0)

📄 Description

📱 Mobile Responsiveness Improvements

This PR implements comprehensive mobile-friendly improvements across the entire application, making it fully usable on smartphones and tablets.

🎯 Key Features

Mobile Terminal Controls

  • Added touch-friendly input controls for mobile users
  • Navigation buttons: Up, Down, Left, Right arrows
  • Action buttons: Enter, Space, Backspace
  • Custom text input with send functionality
  • Show/Hide input toggle for clean interface

Responsive Layouts

  • Main Page: Mobile-optimized padding, font sizes, and tab navigation
  • ScriptsGrid: Responsive category sidebar placement
  • FilterBar: Mobile-friendly button layouts and consistent spacing
  • Modals: All modals are mobile-responsive
  • InstalledScriptsTab: Card layout on mobile, table on desktop

Mobile Terminal Experience

  • Optimized font sizes and dimensions for mobile screens
  • Aggressive terminal clearing for whiptail dialogs
  • Proper centering and scaling for mobile viewports

🔧 Technical Improvements

  • Resolved all React hooks dependency warnings
  • Improved nullish coalescing operators
  • Better ref handling and cleanup
  • Clean, production-ready code

📊 Results

  • Full functionality on smartphones
  • Touch-friendly controls for mobile users
  • Seamless experience across all screen sizes
  • Clean, maintainable code with no linting warnings

🔄 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/76 **Author:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Created:** 10/8/2025 **Status:** ✅ Merged **Merged:** 10/8/2025 **Merged by:** [@michelroegl-brunner](https://github.com/michelroegl-brunner) **Base:** `main` ← **Head:** `feat/ui-responsivnes` --- ### 📝 Commits (10+) - [`b451b13`](https://github.com/community-scripts/ProxmoxVE-Local/commit/b451b13ca0146b5da1de2f06a6e7333813af2f4b) feat: comprehensive mobile responsiveness improvements - [`f4fded4`](https://github.com/community-scripts/ProxmoxVE-Local/commit/f4fded4e3f6510b66b91c7d5d2946c89a7fa40e4) fix: improve mobile terminal input handling for SSH processes - [`82638b2`](https://github.com/community-scripts/ProxmoxVE-Local/commit/82638b2a287b59e49286682dcf399004162e249e) debug: add comprehensive debugging for mobile terminal input - [`abb000a`](https://github.com/community-scripts/ProxmoxVE-Local/commit/abb000a711be75b6c983126f7773a34a757d3d6e) debug: add comprehensive server-side debugging for mobile input - [`cefdb30`](https://github.com/community-scripts/ProxmoxVE-Local/commit/cefdb30ce8c9e314d6180b807c0ec8856256e4c8) debug: add WebSocket message routing debugging - [`f75f763`](https://github.com/community-scripts/ProxmoxVE-Local/commit/f75f763a165551e85deb9e5852bbf4fedde22e44) debug: add comprehensive client-side debugging for mobile input - [`e08c652`](https://github.com/community-scripts/ProxmoxVE-Local/commit/e08c652e58132d677495d0c2392b22dcd236a854) debug: add WebSocket connection tracking and message debugging - [`f685f46`](https://github.com/community-scripts/ProxmoxVE-Local/commit/f685f4647ef40b9d1732d9b2c904a7ca35aba818) fix: correct WebSocket message format for keyboard input - [`592687e`](https://github.com/community-scripts/ProxmoxVE-Local/commit/592687e5fd39106ce16befba0c5382b484c5caec) debug: add WebSocket connection details for mobile vs keyboard input - [`9ed298a`](https://github.com/community-scripts/ProxmoxVE-Local/commit/9ed298a320e51a7db9b6a3cdbc162c1a1da5f2f2) fix: correct WebSocket message format to use 'input' field ### 📊 Changes **19 files changed** (+1123 additions, -481 deletions) <details> <summary>View changed files</summary> 📝 `src/app/_components/CategorySidebar.tsx` (+4 -4) 📝 `src/app/_components/DiffViewer.tsx` (+1 -1) 📝 `src/app/_components/DownloadedScriptsTab.tsx` (+3 -3) 📝 `src/app/_components/ExecutionModeModal.tsx` (+2 -2) 📝 `src/app/_components/FilterBar.tsx` (+130 -87) 📝 `src/app/_components/InstalledScriptsTab.tsx` (+182 -152) 📝 `src/app/_components/ScriptDetailModal.tsx` (+55 -51) ➕ `src/app/_components/ScriptInstallationCard.tsx` (+175 -0) 📝 `src/app/_components/ScriptsGrid.tsx` (+3 -3) 📝 `src/app/_components/ServerForm.tsx` (+4 -2) 📝 `src/app/_components/ServerList.tsx` (+43 -36) 📝 `src/app/_components/SettingsModal.tsx` (+19 -19) 📝 `src/app/_components/Terminal.tsx` (+284 -44) 📝 `src/app/_components/TextViewer.tsx` (+1 -1) 📝 `src/app/_components/VersionDisplay.tsx` (+39 -35) 📝 `src/app/layout.tsx` (+2 -1) 📝 `src/app/page.tsx` (+20 -17) 📝 `src/server/api/websocket/handler.ts` (+84 -23) 📝 `src/styles/globals.css` (+72 -0) </details> ### 📄 Description ## 📱 Mobile Responsiveness Improvements This PR implements comprehensive mobile-friendly improvements across the entire application, making it fully usable on smartphones and tablets. ### 🎯 Key Features #### **Mobile Terminal Controls** - Added touch-friendly input controls for mobile users - Navigation buttons: Up, Down, Left, Right arrows - Action buttons: Enter, Space, Backspace - Custom text input with send functionality - Show/Hide input toggle for clean interface #### **Responsive Layouts** - **Main Page**: Mobile-optimized padding, font sizes, and tab navigation - **ScriptsGrid**: Responsive category sidebar placement - **FilterBar**: Mobile-friendly button layouts and consistent spacing - **Modals**: All modals are mobile-responsive - **InstalledScriptsTab**: Card layout on mobile, table on desktop #### **Mobile Terminal Experience** - Optimized font sizes and dimensions for mobile screens - Aggressive terminal clearing for whiptail dialogs - Proper centering and scaling for mobile viewports ### 🔧 Technical Improvements - Resolved all React hooks dependency warnings - Improved nullish coalescing operators - Better ref handling and cleanup - Clean, production-ready code ### 📊 Results - Full functionality on smartphones - Touch-friendly controls for mobile users - Seamless experience across all screen sizes - Clean, maintainable code with no linting warnings --- <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:18 -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#164
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?