fixes #2426 move authorization section into test section

Moved API key authentication input from a separate card to the test form section for improved clarity. Updated related CSS for better layout and consistency, and adjusted descriptions to highlight API key usage in Piwigo 16.

tools/ws.htm

@@ -76,6 +76,11 @@
               For each method you can consult required and optional parameters, and even test them in direct live!
             </p>
 
+            <p class="header-description"> Introduced in Piwigo 16, you can now use an API key in the HTTP header 
+              to perform authenticated requests without a user session.
+              For more details, check out our <a href="https://github.com/Piwigo/Piwigo/wiki/Piwigo-Web-API#api-key-authentication" target="_blank">documentation</a>.
+            </p>
+    
             <p>
               For more information you can consult our Wiki <a href="https://github.com/Piwigo/Piwigo/wiki#web-api" target="_blank">Piwigo Web API</a> and <a href="https://piwigo.org/forum" target="_blank">our forums</a>.
             </p>
@@ -84,21 +89,6 @@
   
   
         <form id="methodWrapper" style="display:none;">
-          <div class="card">
-            <h3 class="card-title"><i class="icon-cog-alt"></i>Authenticate with API Key (Header)</h3>
-            <div class="card-content">
-              <p class="header-description"> Introduced in Piwigo 16, you can now use an API key in the HTTP header 
-                to perform authenticated requests without a user session.
-                For more details, check out our <a href="https://github.com/Piwigo/Piwigo/wiki/Piwigo-Web-API#api-key-authentication" target="_blank">documentation</a>.
-              </p>
-              <p class="header-warning">Doesn't work when you use "INVOKE (new window)"</p>
-              <div class="header-setting">
-                <p>Authorization:</p>
-                <input type="text" id="apiKey" placeholder="pkid-xxxxxxxx-xxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
-              </div>
-            </div>
-          </div> <!-- methodHeader -->
-
           <div class="card" id="methodDescription" style="display:none;">
             <h3 class="card-title"><i class="icon-book"></i>Description</h3>
             <blockquote>
@@ -134,6 +124,12 @@
                 <h3 class="card-title"><i class="icon-wrench"></i>Test</h3>
                 <div class="card-content">
 
+                  <div class="header-setting">
+                    <p class="header-label">Authorization:</p>
+                    <p class="header-warning">Doesn't work when you use "INVOKE (new window)"</p>
+                    <input type="text" id="apiKey" placeholder="pkid-xxxxxxxx-xxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
+                  </div>
+    
                   <div class="select-group">
                     <label for='requestFormat'>Request format</label>
                     <div class="select">

tools/ws/ws.css

@@ -350,14 +350,11 @@ input[type="text"] {
 }
 
 .header-setting {
-    display: flex;
+    margin-bottom: 10px;
-    align-items: center;
-    gap: 10px;
 }
 
 .header-setting input {
-    max-width: 580px;
+    width: 98%;
-    width: 100%;
 }
 
 .header-description {
@@ -368,10 +365,14 @@ input[type="text"] {
 .header-warning {
     margin: 0;
     color: red;
-    font-size: 12px;
+    font-size: 10px;
     font-style: italic;
 }
 
+.header-label {
+    margin-bottom: 0;
+}
+
 /* #requestResultDisplay {
     background: white;
 } */