From 5241b71f67ee7346c8668069831988dcfa0c5d31 Mon Sep 17 00:00:00 2001
From: ankitsejwal <ankit@sejw.al>
Date: Mon, 24 Nov 2025 13:09:48 +0530
Subject: [PATCH] fix: simplify parameter toggle button positioning

- Swap HTML order to position toggle before connection buttons
- Remove complex CSS selector logic for dynamic positioning
- Use simple absolute positioning for clean layout
- Update test URLs in dev.sh to use uuid format

ref #28
---
 CHANGELOG.md       |  7 ++++++-
 dev.sh             |  4 ++--
 static/css/app.css | 11 +++--------
 static/index.html  | 10 +++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07f0b6701..65da7da2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,11 @@
 ## Changelog
 
-Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.17`.
+Current [release](https://github.com/flowbi/pgweb/releases) is `0.16.18`.
+
+## 0.16.18 - 2025-11-23
+
+- `FIX` Simplify parameter toggle button positioning logic
+- `FIX` Update test URLs in development script
 
 ## 0.16.17 - 2025-11-23
 
diff --git a/dev.sh b/dev.sh
index 324163838..862e6e889 100755
--- a/dev.sh
+++ b/dev.sh
@@ -488,7 +488,7 @@ start_development() {
     
     # Test parameter substitution URL
     echo_info "Test URL with parameters:"
-    echo_info "http://localhost:8081/?Client=client&Instance=instance&ClientName=client-name&InstanceName=instance-name&AccountId=account-id"
+    echo_info "http://localhost:8081/?Client=client-uuid&Instance=instance-uuid&ClientName=client-name&InstanceName=instance-name&AccountId=account-id"
 }
 
 # Stop development environment
@@ -532,7 +532,7 @@ test_browser() {
     echo_info "Testing parameter substitution..."
     sleep 2
     echo_info "Opening pgweb with test parameters..."
-    local test_url="http://localhost:8081/?Client=client&Instance=instance&ClientName=client-name&InstanceName=instance-name&AccountId=account-id&AccountPerspective=account-perspective&AccountDbUser=account-db-user&AccountName=account-name&AccountEmail=account-email&FolderName=folder-name&InvalidParameter=shouldnotshow"
+    local test_url="http://localhost:8081/?Client=client-uuid&Instance=instance-uuid&ClientName=client-name&InstanceName=instance-name&AccountId=account-id&AccountPerspective=account-perspective&AccountDbUser=account-db-user&AccountName=account-name&AccountEmail=account-email&FolderName=folder-name&InvalidParameter=shouldnotshow"
     open "$test_url" 2>/dev/null || echo_warning "Could not open browser automatically"
     echo_info "Test URL: $test_url"
 }
diff --git a/static/css/app.css b/static/css/app.css
index 7f9adda0b..7b7bfcb04 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -748,25 +748,20 @@ body, html {
   overflow-y: auto;
 }
 
-.connection-actions {
+.parameter-toggle-action {
   position: absolute;
   right: 8px;
   top: 10px;
   display: none;
 }
 
-.parameter-toggle-action {
+.connection-actions {
   position: absolute;
-  right: 8px;
+  right: 50px;
   top: 10px;
   display: none;
 }
 
-/* When both are visible, shift parameter toggle to the left */
-.connection-actions:not([style*="display: none"]) ~ .parameter-toggle-action {
-  right: 200px;
-}
-
 #edit_connection, #close_connection {
   background: var(--pgweb-primary-color);
   color: var(--pgweb-primary-text);
diff --git a/static/index.html b/static/index.html
index 4fe15e8f8..0aa5d5bdc 100644
--- a/static/index.html
+++ b/static/index.html
@@ -36,16 +36,16 @@
         <li id="table_connection">Connection</li>
       </ul>
 
-      <div class="connection-actions">
-        <a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-database"></i> Connect</a>
-        <a href="#" id="close_connection" class="btn btn-default btn-sm">Disconnect</a>
-      </div>
-
       <div class="parameter-toggle-action">
         <a href="#" id="toggle_param_overlay" class="btn btn-default btn-sm" title="Toggle parameter overlay">
           <i class="fa fa-toggle-off"></i>
         </a>
       </div>
+
+      <div class="connection-actions">
+        <a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-database"></i> Connect</a>
+        <a href="#" id="close_connection" class="btn btn-default btn-sm">Disconnect</a>
+      </div>
     </div>
     <div id="sidebar">
       <div class="current-database">