From 4f084e6beb734ecfa5aa5a54d5a1086487ee517e Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Thu, 4 Nov 2021 10:47:03 +0100
Subject: [PATCH] chg: [app] Various layout improvements for responsiveness

---
 src/View/Helper/BootstrapHelper.php           |  4 +-
 .../Form/formLayouts/formDefault.php          |  4 +-
 .../genericElements/Form/genericForm.php      |  2 +-
 .../Form/metaTemplateScaffold.php             |  9 +--
 .../Form/multiFieldScaffold.php               | 13 ++--
 .../SingleViews/single_view.php               |  6 +-
 .../additional/bootstrap-additional.css       | 19 ++++--
 webroot/css/themes/theme-darkly.css           | 19 ++++--
 webroot/css/themes/theme-default.css          | 19 ++++--
 webroot/css/themes/theme-flatly.css           | 19 ++++--
 webroot/css/themes/theme-minty.css            | 19 ++++--
 webroot/css/themes/theme-quartz.css           | 19 ++++--
 webroot/css/themes/theme-slate.css            | 19 ++++--
 webroot/css/themes/theme-vapor.css            | 19 ++++--
 webroot/scss/custom.scss                      | 60 +++++--------------
 15 files changed, 141 insertions(+), 109 deletions(-)

diff --git a/src/View/Helper/BootstrapHelper.php b/src/View/Helper/BootstrapHelper.php
index b4d2ccc..ccc6e7e 100644
--- a/src/View/Helper/BootstrapHelper.php
+++ b/src/View/Helper/BootstrapHelper.php
@@ -779,7 +779,7 @@ class BoostrapListTable extends BootstrapGeneric {
         $rowValue = $this->genCell($field);
         $rowKey = $this->genNode('th', [
             'class' => [
-                'col-sm-2'
+                'col-4 col-sm-2'
             ],
             'scope' => 'row'
         ], h($field['key']));
@@ -808,7 +808,7 @@ class BoostrapListTable extends BootstrapGeneric {
         }
         return $this->genNode('td', [
             'class' => [
-                'col-sm-10',
+                'col-8 col-sm-10',
                 !empty($row['_cellVariant']) ? "bg-{$row['_cellVariant']}" : ''
             ]
         ], $cellContent);
diff --git a/templates/element/genericElements/Form/formLayouts/formDefault.php b/templates/element/genericElements/Form/formLayouts/formDefault.php
index d68f36a..7953082 100644
--- a/templates/element/genericElements/Form/formLayouts/formDefault.php
+++ b/templates/element/genericElements/Form/formLayouts/formDefault.php
@@ -9,12 +9,12 @@
             <?= $data['description'] ?>
         </div>
     <?php endif; ?>
-    <div class="panel col-8">
+    <div class="panel col-lg-8">
         <?= $fieldsString ?>
     </div>
 
     <?php if (!empty($metaTemplateString)) : ?>
-        <div class="col-10">
+        <div class="col-lg-10">
             <?=
             $this->Bootstrap->accordion(
                 [
diff --git a/templates/element/genericElements/Form/genericForm.php b/templates/element/genericElements/Form/genericForm.php
index 5614982..8438434 100644
--- a/templates/element/genericElements/Form/genericForm.php
+++ b/templates/element/genericElements/Form/genericForm.php
@@ -37,7 +37,7 @@
         'select' => '<select name="{{name}}" {{attrs}}>{{content}}</select>',
         'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
         'checkboxFormGroup' => '{{label}}',
-        'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
+        'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
         'nestingLabel' => '{{hidden}}<div class="col-sm-2 form-label">{{text}}</div><div class="col-sm-10">{{input}}</div>',
         'option' => '<option value="{{value}}"{{attrs}}>{{text}}</option>',
         'optgroup' => '<optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup>',
diff --git a/templates/element/genericElements/Form/metaTemplateScaffold.php b/templates/element/genericElements/Form/metaTemplateScaffold.php
index 8b27bdf..6f20048 100644
--- a/templates/element/genericElements/Form/metaTemplateScaffold.php
+++ b/templates/element/genericElements/Form/metaTemplateScaffold.php
@@ -5,7 +5,7 @@ use Cake\Utility\Inflector;
 $default_template = [
     'inputContainer' => '<div class="row mb-3 metafield-container">{{content}}</div>',
     'inputContainerError' => '<div class="row mb-3 metafield-container has-error">{{content}}</div>',
-    'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
+    'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
 ];
 $this->Form->setTemplates($default_template);
 $backupTemplates = $this->Form->getTemplates();
@@ -38,8 +38,9 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
                 $metaField = reset($metaTemplateField->metaFields);
                 $fieldData = [
                     'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaField->meta_template_id, $metaField->meta_template_field_id, $metaField->id),
-                    'label' => $metaTemplateField->field,
+                    'label' => $metaTemplateField->label,
                 ];
+                $this->Form->setTemplates($backupTemplates);
                 $fieldsHtml .= $this->element(
                     'genericElements/Form/fieldScaffold',
                     [
@@ -60,12 +61,11 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
                         'form' => $this->Form,
                     ]
                 );
-                $this->Form->setTemplates($backupTemplates);
             } else {
                 $this->Form->setTemplates($backupTemplates);
                 $fieldData = [
                     'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
-                    'label' => $metaTemplateField->field,
+                    'label' => $metaTemplateField->label,
                 ];
                 $fieldsHtml .= $this->element(
                     'genericElements/Form/fieldScaffold',
@@ -79,6 +79,7 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
     }
     $tabData['content'][$i] = $fieldsHtml;
 }
+$this->Form->setTemplates($backupTemplates);
 echo $this->Bootstrap->Tabs([
     'pills' => true,
     'data' => $tabData,
diff --git a/templates/element/genericElements/Form/multiFieldScaffold.php b/templates/element/genericElements/Form/multiFieldScaffold.php
index 6af9bcf..90584e4 100644
--- a/templates/element/genericElements/Form/multiFieldScaffold.php
+++ b/templates/element/genericElements/Form/multiFieldScaffold.php
@@ -1,8 +1,11 @@
 <?php
+
+use Cake\Utility\Inflector;
+
 $default_template = [
     'inputContainer' => '<div class="row pb-1 multi-metafield-container">{{content}}</div>',
     'inputContainerError' => '<div class="row pb-1 metafield-container has-error">{{content}}</div>',
-    'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
+    'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10 multi-metafield-input-container">{{input}}{{error}}</div>',
 ];
 $form->setTemplates($default_template);
 
@@ -10,8 +13,9 @@ $fieldsHtml = '';
 $labelPrintedOnce = false;
 if (!empty($metaFieldsEntities)) {
     foreach ($metaFieldsEntities as $i => $metaFieldsEntity) {
+        $metaFieldsEntity->label = Inflector::humanize($metaFieldsEntity->field);
         $fieldData = [
-            'label' => $metaFieldsEntity->field,
+            'label' => $metaFieldsEntity->label,
             'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaFieldsEntity->meta_template_id, $metaFieldsEntity->meta_template_field_id, $metaFieldsEntity->id),
         ];
         if ($labelPrintedOnce) { // Only the first input can have a label
@@ -28,13 +32,14 @@ if (!empty($metaFieldsEntities)) {
     }
 }
 if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field button
+    $metaTemplateField->label = Inflector::humanize($metaTemplateField->field);
     $emptyMetaFieldInput = '';
     if (empty($metaFieldsEntities)) {
         $emptyMetaFieldInput = $this->element(
             'genericElements/Form/fieldScaffold',
             [
                 'fieldData' => [
-                    'label' => $metaTemplateField->field,
+                    'label' => $metaTemplateField->label,
                     'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
                     'class' => 'new-metafield',
                 ],
@@ -53,7 +58,7 @@ if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field but
         ]
     );
     $multiFieldButtonHtml = sprintf(
-        '<div class="row pb-1 multi-metafield-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10">%s</div></div>',
+        '<div class="row pb-1 multi-metafield-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10 multi-metafield-input-container">%s</div></div>',
         $this->element(
             'genericElements/Form/multiFieldButton',
             [
diff --git a/templates/element/genericElements/SingleViews/single_view.php b/templates/element/genericElements/SingleViews/single_view.php
index 90bcbc1..e82b100 100644
--- a/templates/element/genericElements/SingleViews/single_view.php
+++ b/templates/element/genericElements/SingleViews/single_view.php
@@ -78,11 +78,11 @@
         __('{0} view', \Cake\Utility\Inflector::singularize(\Cake\Utility\Inflector::humanize($this->request->getParam('controller')))) :
         $title;
     echo sprintf(
-        "<div id=\"single-view-table-container-%s\">
+    "<div id=\"single-view-table-container-%s\">
             <h2 class=\"fw-light\">%s</h2>
             %s%s
-            <div>%s</div>
-            <div id=\"metafieldsPanel\" class=\"col-lg-8 px-0\">%s</div>
+            <div class=\"col-xl-10 col-xxl-8 px-0\">%s</div>
+            <div id=\"metafieldsPanel\" class=\"col-xl-12 col-xxl-10 px-0\">%s</div>
             <div id=\"accordion\">%s</div>
         </div>",
         $tableRandomValue,
diff --git a/webroot/css/themes/additional/bootstrap-additional.css b/webroot/css/themes/additional/bootstrap-additional.css
index af58896..1f0e021 100644
--- a/webroot/css/themes/additional/bootstrap-additional.css
+++ b/webroot/css/themes/additional/bootstrap-additional.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #6c757d;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css
index 95c426f..393d869 100644
--- a/webroot/css/themes/theme-darkly.css
+++ b/webroot/css/themes/theme-darkly.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #444;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css
index feaf097..05b8f97 100644
--- a/webroot/css/themes/theme-default.css
+++ b/webroot/css/themes/theme-default.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #6c757d;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css
index a843319..e6002cf 100644
--- a/webroot/css/themes/theme-flatly.css
+++ b/webroot/css/themes/theme-flatly.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #95a5a6;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css
index 63ce170..643a74a 100644
--- a/webroot/css/themes/theme-minty.css
+++ b/webroot/css/themes/theme-minty.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #95a5a6;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css
index fde9a80..075d9b8 100644
--- a/webroot/css/themes/theme-quartz.css
+++ b/webroot/css/themes/theme-quartz.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: rgba(255, 255, 255, 0.4);
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css
index 37a6b27..f94c3f9 100644
--- a/webroot/css/themes/theme-slate.css
+++ b/webroot/css/themes/theme-slate.css
@@ -296,7 +296,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #7a8288;
@@ -305,11 +305,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css
index 31042a5..8015474 100644
--- a/webroot/css/themes/theme-vapor.css
+++ b/webroot/css/themes/theme-vapor.css
@@ -300,7 +300,7 @@
 
 :not(.meta-template-container) > .multi-metafield-container {
   position: relative; }
-  :not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
     border-style: solid;
     border-color: #ea39b8;
@@ -309,11 +309,18 @@
     width: 0.5rem;
     height: 100%;
     border-width: 0px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
-    transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-    border-top-right-radius: 3px;
-    border-width: 2px 2px 0px 0px; }
-  :not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
+  :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+    border-width: 2px 0px 0px 2px;
+    border-top-left-radius: 3px;
+    transform: translate(calc(1.5rem * -.5), -20px); }
+  @media (min-width: 576px) {
+    :not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
+      height: calc(100% - 10px);
+      transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+      border-top-left-radius: 0px;
+      border-top-right-radius: 3px;
+      border-width: 2px 2px 0px 0px; } }
+  :not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
     transform: translateX(calc(1.5rem * -.5));
     border-bottom-left-radius: 3px;
     height: 50%;
diff --git a/webroot/scss/custom.scss b/webroot/scss/custom.scss
index 122f158..3738b86 100644
--- a/webroot/scss/custom.scss
+++ b/webroot/scss/custom.scss
@@ -1,48 +1,9 @@
 $secondary: #6c757d !default;
 
-// .multi-metafield-container {
-//     position: relative;
-// }
-
-// .multi-metafield-container .col-sm-10::before {
-//     transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
-//     border-style: solid;
-//     border-color: $secondary;
-// }
-
-// .multi-metafield-container:first-child .col-sm-10::before {
-//     transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-//     border-top-right-radius: 3px;
-//     position: absolute;
-//     content: ' ';
-//     width: 0.5rem;
-//     border-width: 2px 2px 0px 0px;
-// }
-
-// .multi-metafield-container .col-sm-10::before {
-//     position: absolute;
-//     content: ' ';
-//     width: 0.5rem;
-//     height: 100%;
-//     border-width: 0px 2px 0px 0px;
-// }
-
-// .multi-metafield-container:last-child .col-sm-10::before {
-//     transform: translateX(calc(1.5rem * -.5));
-//     border-bottom-left-radius: 3px;
-//     position: absolute;
-//     content: ' ';
-//     width: 0.5rem;
-//     height: 50%;
-//     border-width: 0px 0px 2px 2px;
-// }
-
-// :not(.meta-template-container) .multi-metafield-container {
-// .multi-metafield-container :not(.meta-template-container) {
 :not(.meta-template-container) > .multi-metafield-container {
     position: relative;
 
-    & > .col-sm-10::before {
+    & > .multi-metafield-input-container::before {
         transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
         border-style: solid;
         border-color: $secondary;
@@ -53,13 +14,22 @@ $secondary: #6c757d !default;
         border-width: 0px 2px 0px 0px;
     }
 
-    &:first-child > .col-sm-10::before {
-        transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 12px);
-        border-top-right-radius: 3px;
-        border-width: 2px 2px 0px 0px;
+    &:first-child > .multi-metafield-input-container::before {
+        border-width: 2px 0px 0px 2px;
+        border-top-left-radius: 3px;
+        transform: translate(calc(1.5rem * -.5), -20px);
+    }
+    @include media-breakpoint-up(sm) {
+        &:first-child > .multi-metafield-input-container::before {
+            height: calc(100% - 10px);
+            transform: translate(calc(1.5rem  * -.5 - 0.25rem - 2px), 20px);
+            border-top-left-radius: 0px;
+            border-top-right-radius: 3px;
+            border-width: 2px 2px 0px 0px;
+        }
     }
 
-    &:last-child > .col-sm-10::before {
+    &:last-child > .multi-metafield-input-container::before {
         transform: translateX(calc(1.5rem * -.5));
         border-bottom-left-radius: 3px;
         height: 50%;