Adjust form label padding (jenkinsci#7962)

* Init

* Update textarea.scss

Author: janfaracik

core/src/main/resources/lib/form/textarea.jelly

@@ -108,14 +108,13 @@ THE SOFTWARE.
   <j:if test="${attrs.previewEndpoint!=null and !readOnlyMode}">
     <div class="textarea-preview-container">
       <j:if test="${attrs.previewEndpoint == '/markupFormatter/previewDescription'}">
-        [${app.markupFormatter.descriptor.displayName}]<st:nbsp/>
+        ${app.markupFormatter.descriptor.displayName}
       </j:if>
       <a href="#" class="textarea-show-preview" previewEndpoint="${attrs.previewEndpoint}">${%Preview}</a>
-      <st:nbsp/>
       <a href="#" class="textarea-hide-preview">${%Hide preview}</a>
-      <div class="textarea-preview">
-        <!-- div for preview -->
-      </div>
+    </div>
+    <div class="textarea-preview">
+      <!-- div for preview -->
     </div>
   </j:if>
 </j:jelly>

core/src/main/resources/lib/form/textarea/textarea.js

@@ -39,7 +39,7 @@ Behaviour.specify(
   "textarea",
   100,
   function (e) {
-    var previewDiv = e.querySelector(".textarea-preview");
+    var previewDiv = e.nextSibling;
     var showPreview = e.querySelector(".textarea-show-preview");
     var hidePreview = e.querySelector(".textarea-hide-preview");
     hidePreview.style.display = "none";

war/src/main/scss/base/style.scss

@@ -1223,18 +1223,6 @@ table.progress-bar.red td.progress-bar-done {
   font-size: 1.9em;
 }
 
-/* ========================= textarea.jelly ================== */
-
-.textarea-preview-container {
-  text-align: left;
-}
-
-.textarea-preview {
-  background-color: var(--very-light-grey);
-  padding: 0.5em;
-  border-radius: 10px;
-}
-
 /* ========================= logRecords.jelly ================== */
 
 .logrecord-container {

war/src/main/scss/form/layout.scss

@@ -44,15 +44,15 @@
   align-items: center;
   font-weight: var(--form-label-font-weight);
   margin-top: 0;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
 
 .jenkins-form-description {
   display: block;
   // Tweaked margin so that it appears visually centred when placed next to `.jenkins-form-label`
-  margin: -0.2rem 0 0.8rem;
+  margin: -0.2rem 0 0.5rem;
   color: var(--text-color-secondary);
   line-height: 1.66;
 }

war/src/main/scss/form/textarea.scss

@@ -0,0 +1,13 @@
+.textarea-preview-container {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  color: var(--text-color-secondary);
+}
+
+.textarea-preview {
+  background-color: var(--very-light-grey);
+  padding: var(--form-input-padding);
+  margin-top: 0.5rem;
+  border-radius: 10px;
+}

war/src/main/scss/styles.scss

@@ -16,6 +16,7 @@
 @use "./form/reorderable-list";
 @use "./form/search-bar";
 @use "./form/select";
+@use "./form/textarea";
 @use "./form/toggle-switch";
 @use "./form/validation";
 @use "./modules/app-bar";