[gchq#181] reduce title-height from 48 to 40

Author: valdelaseras

src/web/App.mjs

@@ -904,9 +904,9 @@ class App {
     assignAvailableHeight( isMobile ){
         const bannerHeight = 40;
         const controlsHeight = 50;
-        const operationsHeight = 90;
+        const operationsHeight = 80;
 
-        const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight-2);
+        const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight);
 
         // equally divide among recipe, input and output
         ["recipe", "input", "output"].forEach(( div ) => {

src/web/html/index.html

@@ -271,7 +271,7 @@
                 <div id="IO" class="split split-horizontal">
                     <div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">
                         <div class="title no-select">
-                            <label for="input-text">Input</label>
+                            Input
                             <span class="pane-controls">
                                 <div class="io-info" id="input-files-info"></div>
                                 <button type="button" class="desktop-only btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab" data-help-title="Tabs" data-help="<p>New tabs can be created to support multiple Inputs. These tabs have their own associated character encodings and EOL separators, as defined in their status bars.</p><p>The deep link in the URL bar only contains information about the currently active tab.</p>">
@@ -327,7 +327,7 @@
                     </div>
                     <div id="output" class="split" data-help-title="Output pane" data-help="<p>This pane displays the results of the Recipe after it has processed your Input.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p><p>When copying these characters from the Output, the original byte value should be copied into your clipboard, rather than the control character picture itself.</p>">
                         <div class="title no-select">
-                            <label for="output-text">Output</label>
+                            Output
                             <div class="flex-row-reverse">
                                 <span class="pane-controls">
                                     <div class="io-info" id="bake-info"></div>

src/web/stylesheets/components/_controls.css

@@ -8,14 +8,18 @@
 
 #controls {
     width: 100%;
-    border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
     overflow: hidden;
 }
 
+@media only screen and (min-width: 768px) {
+    #controls {
+        border-top: 1px solid var(--primary-border-colour);
+    }
+}
+
 #controls-content {
     display: flex;
-    /*align-items: center;*/
     padding: 10px 0;
     height: 100%;
 }

src/web/stylesheets/components/_pane.css

@@ -6,28 +6,24 @@
  * @license Apache-2.0
  */
 
-:root {
-    --title-height: 48px;
-    --tab-height: 40px;
-}
-
 .title {
     padding: 8px 12px;
-    height: var(--title-height);
     border-bottom: 1px solid var(--primary-border-colour);
     font-weight: var(--title-weight);
     font-size: var(--title-size);
     color: var(--title-colour);
     background-color: var(--title-background-colour);
-    line-height: calc(var(--title-height) - 14px);
     display: flex;
     justify-content: space-between;
+    height: var(--title-height);
+    align-items: center;
 }
 
 .pane-controls {
     right: 8px;
     top: 8px;
     display: inline-flex;
+    align-items: center;
 }
 
 .pane-controls .btn {
@@ -47,4 +43,3 @@
 #files .card-header .float-right a:hover {
     text-decoration: none;
 }
-

src/web/stylesheets/components/operations/_operations.css

@@ -15,7 +15,7 @@
 
 #operations-dropdown {
     position: absolute;
-    top: 41px;
+    top: var(--banner-height);
     width: 100%;
     height: auto;
     overflow: auto;

src/web/stylesheets/themes/_structure.css

@@ -1,11 +1,15 @@
 :root {
     /* Fixed heights */
     --banner-height: 40px;
-    /*initial mobile height*/
+
+    /* Mobile height */
+    --title-height: 40px;
     --controls-height: 50px;
-    --operations-height: 90px;
+    --operations-height: 80px;
 
+    /* Desktop specific height */
     --desktop-controls-height: 70px;
+    --tab-height: 40px;
 }
 
 /**