From 2336c0c093b706fbe0b66edd6a4183cc869635ba Mon Sep 17 00:00:00 2001
From: Rico Sonntag <mail@ricosonntag.de>
Date: Thu, 4 Apr 2024 10:53:39 +0200
Subject: [PATCH] Fix layout break on mobile devices

---
 resources/css/pedigree-chart.css               |  6 ------
 .../pedigree-chart/form/generations.phtml      | 16 ++++++++--------
 .../modules/pedigree-chart/form/layout.phtml   |  8 ++++----
 .../pedigree-chart/form/orientation.phtml      | 18 +++++++++---------
 .../views/modules/pedigree-chart/page.phtml    |  8 ++++----
 5 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/resources/css/pedigree-chart.css b/resources/css/pedigree-chart.css
index 4f49e25..d942e44 100644
--- a/resources/css/pedigree-chart.css
+++ b/resources/css/pedigree-chart.css
@@ -20,9 +20,6 @@
 .webtrees-pedigree-chart-container svg {
     display: block;
     margin: auto;
-    cursor: move;
-    /*cursor: -webkit-grab;*/
-    /*cursor: -moz-grab;*/
     cursor: grab;
     /*-webkit-filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.4));*/
     /*filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.4));*/
@@ -30,7 +27,6 @@
 
 .webtrees-pedigree-chart-container svg:active {
     cursor: grabbing;
-    /*cursor: -webkit-grabbing;*/
 }
 
 .webtrees-pedigree-chart-container svg .person {
@@ -71,8 +67,6 @@
     position: relative;
     margin: 0;
     top: 50%;
-    /*-webkit-transform: translateY(-50%);*/
-    /*-ms-transform: translateY(-50%);*/
     transform: translateY(-50%);
     opacity: 1;
     text-align: center;
diff --git a/resources/views/modules/pedigree-chart/form/generations.phtml b/resources/views/modules/pedigree-chart/form/generations.phtml
index 22bd5f8..672a90e 100644
--- a/resources/views/modules/pedigree-chart/form/generations.phtml
+++ b/resources/views/modules/pedigree-chart/form/generations.phtml
@@ -17,18 +17,18 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
  */
 ?>
 
-<fieldset class="form-group row">
+<div class="row">
     <label class="col-sm-3 col-form-label wt-page-options-label" for="generations">
         <?= I18N::translate('Generations') ?>
     </label>
     <div class="col-sm-9 wt-page-options-value">
         <?=
-        view('components/select', [
-            'name'     => 'generations',
-            'selected' => $configuration->getGenerations(),
-            'options'  => $configuration->getGenerationsList(),
-            'class'    => 'form-control-sm',
-        ])
+            view('components/select', [
+                'name'     => 'generations',
+                'selected' => $configuration->getGenerations(),
+                'options'  => $configuration->getGenerationsList(),
+                'class'    => 'form-control-sm',
+            ])
         ?>
     </div>
-</fieldset>
+</div>
diff --git a/resources/views/modules/pedigree-chart/form/layout.phtml b/resources/views/modules/pedigree-chart/form/layout.phtml
index 3c952dc..8b263f0 100644
--- a/resources/views/modules/pedigree-chart/form/layout.phtml
+++ b/resources/views/modules/pedigree-chart/form/layout.phtml
@@ -18,10 +18,10 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
  */
 ?>
 
-<fieldset class="form-group row">
-    <legend class="col-form-label col-sm-3 wt-page-options-label">
+<div class="row">
+    <div class="col-form-label col-sm-3 wt-page-options-label">
         <?= I18N::translate('Layout') ?>
-    </legend>
+    </div>
     <div class="col-sm-9 wt-page-options-value">
         <?=
             view($moduleName . '::modules/components/checkbox', [
@@ -60,4 +60,4 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
             </small>
         </div>
     </div>
-</fieldset>
+</div>
diff --git a/resources/views/modules/pedigree-chart/form/orientation.phtml b/resources/views/modules/pedigree-chart/form/orientation.phtml
index 3b09455..1dfd9ea 100644
--- a/resources/views/modules/pedigree-chart/form/orientation.phtml
+++ b/resources/views/modules/pedigree-chart/form/orientation.phtml
@@ -17,17 +17,17 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
  */
 ?>
 
-<fieldset class="form-group row">
-    <legend class="col-form-label col-sm-3 wt-page-options-label">
+<div class="row">
+    <div class="col-form-label col-sm-3 wt-page-options-label">
         <?= I18N::translate('Orientation') ?>
-    </legend>
+    </div>
     <div class="col-sm-9 wt-page-options-value" id="layout">
         <?=
-        view('components/radios-inline', [
-            'name'     => 'layout',
-            'options'  => $configuration->getLayouts(),
-            'selected' => $configuration->getLayout(),
-        ])
+            view('components/radios-inline', [
+                'name'     => 'layout',
+                'options'  => $configuration->getLayouts(),
+                'selected' => $configuration->getLayout(),
+            ])
         ?>
     </div>
-</fieldset>
+</div>
diff --git a/resources/views/modules/pedigree-chart/page.phtml b/resources/views/modules/pedigree-chart/page.phtml
index 2e2a642..f276226 100644
--- a/resources/views/modules/pedigree-chart/page.phtml
+++ b/resources/views/modules/pedigree-chart/page.phtml
@@ -34,7 +34,7 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
     <form id="webtrees-pedigree-chart-form" method="post" class="wt-page-options wt-page-options-pedigree-chart d-print-none">
         <?= csrf_field() ?>
 
-        <fieldset class="form-group row">
+        <div class="row">
             <label class="col-sm-3 col-form-label wt-page-options-label" for="xref">
                 <?= I18N::translate('Individual') ?>
             </label>
@@ -48,7 +48,7 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
                     ])
                 ?>
             </div>
-        </fieldset>
+        </div>
 
         <?= view($moduleName . '::modules/pedigree-chart/form/generations', ['configuration' => $configuration]) ?>
         <?= view($moduleName . '::modules/pedigree-chart/form/orientation', ['configuration' => $configuration]) ?>
@@ -57,7 +57,7 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
             <?= view($moduleName . '::modules/pedigree-chart/form/layout', ['configuration' => $configuration, 'moduleName' => $moduleName]) ?>
         </div>
 
-        <fieldset class="form-group row mt-2">
+        <div class="row mt-3">
             <div class="col-sm-12 wt-page-options-value text-center">
                 <div class="btn-toolbar justify-content-between">
                     <div class="btn-group btn-group-sm">
@@ -94,7 +94,7 @@ use MagicSunday\Webtrees\PedigreeChart\Configuration;
                     </div>
                 </div>
             </div>
-        </fieldset>
+        </div>
     </form>
 
     <div id="pedigree-chart-url" class="row wt-ajax-load wt-page-content wt-chart wt-pedigree-chart"></div>