From dac71afedcbc59b9aebfbbb4c910bb4e61ee33f0 Mon Sep 17 00:00:00 2001
From: Chuck <33324927+ChuckBuilds@users.noreply.github.com>
Date: Mon, 14 Sep 2026 13:27:00 -0400
Subject: [PATCH] fix(web): full-height plugin config form and full-width
 plugin card descriptions (#573)

* fix(web): let the plugin config form use the full page height

The form wrapper has carried `max-h-96 overflow-y-auto` since #145, but
the class was a no-op until #568 defined `.max-h-96` in app.css. That
silently capped the whole config form at 24rem with a nested scrollbar.
Drop the cap so the form flows naturally and the page scrolls.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* fix(web): give installed plugin card descriptions the full card width

The enable/disable toggle was a flex sibling of the whole text column
(name, metadata, description), so it reserved its width for the full
height of the card body. Descriptions wrapped into a narrow strip,
leaving blank space under the toggle and making cards very tall.

Move the toggle into a header row with just the name and badges, and
render the metadata and description below at full width.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 web_interface/static/v3/plugins_manager.js    | 25 +++++++++++--------
 .../templates/v3/partials/plugin_config.html  |  2 +-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web_interface/static/v3/plugins_manager.js b/web_interface/static/v3/plugins_manager.js
index 95bb7155..cf4f87b3 100644
--- a/web_interface/static/v3/plugins_manager.js
+++ b/web_interface/static/v3/plugins_manager.js
@@ -1556,22 +1556,18 @@ function renderInstalledCards(plugins, total) {
 
         return `
         <div class="plugin-card">
-            <div class="flex items-start justify-between mb-4">
-                <div class="flex-1 min-w-0">
-                    <div class="flex items-center flex-wrap gap-2 mb-2">
+            <div class="mb-4">
+                <!-- Header row: only the name and badges share a line with the
+                     toggle, so the metadata and description below get the
+                     card's full width. -->
+                <div class="flex items-start justify-between gap-3 mb-2">
+                    <div class="flex items-center flex-wrap gap-2 min-w-0">
                         <h4 class="font-semibold text-gray-900 text-base">${escapeHtml(plugin.name || plugin.id)}</h4>
                         ${plugin.is_starlark_app ? '<span class="badge badge-warning"><i class="fas fa-star mr-1"></i>Starlark</span>' : ''}
                         ${plugin.verified ? '<span class="badge badge-success"><i class="fas fa-check-circle mr-1"></i>Verified</span>' : ''}
                     </div>
-                    <div class="text-sm text-gray-600 space-y-1.5 mb-3">
-                        <p class="flex items-center"><i class="fas fa-user mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.author || 'Unknown')}</p>
-                        ${plugin.version ? `<p class="flex items-center flex-wrap gap-1.5"><i class="fas fa-tag mr-2 text-gray-400 w-4"></i>v${escapeHtml(plugin.version)}${plugin.update_available && plugin.latest_version ? `<span class="badge badge-info" title="Installed v${escapeAttr(plugin.version)} → latest v${escapeAttr(plugin.latest_version)}"><i class="fas fa-arrow-circle-up mr-1"></i>v${escapeHtml(plugin.latest_version)} available</span>` : ''}</p>` : ''}
-                        <p class="flex items-center"><i class="fas fa-folder mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.category || 'General')}</p>
-                    </div>
-                    <p class="text-sm text-gray-700 leading-relaxed">${escapeHtml(plugin.description || 'No description available')}</p>
-                </div>
                 <!-- Toggle Switch in Top Right -->
-                <div class="flex-shrink-0 ml-4">
+                <div class="flex-shrink-0">
                     <label class="relative inline-flex items-center cursor-pointer group">
                         <!-- input.peer must stay immediately before the visible pill:
                              peer-focus:* only reaches a following sibling. -->
@@ -1598,6 +1594,13 @@ function renderInstalledCards(plugins, total) {
                         </div>
                     </label>
                 </div>
+                </div>
+                <div class="text-sm text-gray-600 space-y-1.5 mb-3">
+                    <p class="flex items-center"><i class="fas fa-user mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.author || 'Unknown')}</p>
+                    ${plugin.version ? `<p class="flex items-center flex-wrap gap-1.5"><i class="fas fa-tag mr-2 text-gray-400 w-4"></i>v${escapeHtml(plugin.version)}${plugin.update_available && plugin.latest_version ? `<span class="badge badge-info" title="Installed v${escapeAttr(plugin.version)} → latest v${escapeAttr(plugin.latest_version)}"><i class="fas fa-arrow-circle-up mr-1"></i>v${escapeHtml(plugin.latest_version)} available</span>` : ''}</p>` : ''}
+                    <p class="flex items-center"><i class="fas fa-folder mr-2 text-gray-400 w-4"></i>${escapeHtml(plugin.category || 'General')}</p>
+                </div>
+                <p class="text-sm text-gray-700 leading-relaxed">${escapeHtml(plugin.description || 'No description available')}</p>
             </div>
 
             <!-- Plugin Tags -->
diff --git a/web_interface/templates/v3/partials/plugin_config.html b/web_interface/templates/v3/partials/plugin_config.html
index 3e30f7fc..8b7e661b 100644
--- a/web_interface/templates/v3/partials/plugin_config.html
+++ b/web_interface/templates/v3/partials/plugin_config.html
@@ -1266,7 +1266,7 @@
             <div class="bg-gray-50 rounded-lg p-4">
                 <h3 class="text-md font-medium text-gray-900 mb-3">Configuration</h3>
                 {{ ui.settings_filter("Filter this plugin's settings…") }}
-                <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
+                <div class="space-y-4">
                     {% if schema and schema.properties %}
                         {# Use property order if defined, otherwise use natural order #}
                         {# Skip 'enabled' field - it's handled by the header toggle #}