From 10349cf19e7a2080f986f4bb42be90963c3f9bba Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 20 May 2025 17:06:10 -0700
Subject: [PATCH] fix: Syslinux responsiveness

---
 emhttp/plugins/dynamix/Syslinux.page       | 33 +++++++++----
 emhttp/plugins/dynamix/sheets/Syslinux.css | 55 ++++++----------------
 2 files changed, 37 insertions(+), 51 deletions(-)

diff --git a/emhttp/plugins/dynamix/Syslinux.page b/emhttp/plugins/dynamix/Syslinux.page
index 94d4f40ed..2cc932dab 100644
--- a/emhttp/plugins/dynamix/Syslinux.page
+++ b/emhttp/plugins/dynamix/Syslinux.page
@@ -16,8 +16,6 @@ Cond="file_exists('/boot/syslinux/syslinux.cfg')"
  */
 ?>
 <?
-$top = $themes1 ? -58 : -44;
-
 function strip($area) {
   return preg_replace(["/^|(\n)  /","/\n$/"],["$1",""],$area);
 }
@@ -176,7 +174,9 @@ $(function(){
   });
 });
 </script>
-<span class="status" style="margin-top:<?=$top?>px"><input type="checkbox" class="advancedview"></span>
+
+&nbsp;
+: <span><input type="checkbox" class="advancedview"></span>
 
 :syslinux_cfg_help:
 
@@ -194,25 +194,38 @@ _(Syslinux configuration)_:
   $label = ($i) ? array_shift($area):$title;
   $start = in_array($menu,$area);
   if ($start) unset($area[array_search($menu,$area)]);
-?><span id="label-<?=$i?>" class="<?=$start?'array':'system'?>"><?=htmlspecialchars($label)?>
-  <?if ($i):?><span style="float:right"><input type="radio" id="input-<?=$i?>" class="menu" <?=$start?'checked':''?> title="_(Set default boot menu)_" onchange="changeMenu(this.form,this.id,true)"></span><?endif;?></span>
-  <textarea class="menu" id="menu-<?=$i++?>" spellcheck="false" cols="80" rows="<?=count($area)?>" maxlength="2048"><?=htmlspecialchars(implode("\n",$area))?></textarea>
+?><span class="config-item flex flex-col">
+    <span class="<?= $start ? 'array' : 'system' ?> config-item-label-wrapper flex flex-row justify-between">
+      <label id="label-<?=$i?>">
+        <?if ($i):?><input type="radio" id="input-<?=$i?>" class="menu" <?=$start?'checked':''?> title="_(Set default boot menu)_" onchange="changeMenu(this.form,this.id,true)"><?endif;?>
+        <?=htmlspecialchars($label)?>
+      </label>
+    </span>
+    <textarea class="menu" id="menu-<?=$i++?>" spellcheck="false" cols="80" rows="<?=count($area)?>" maxlength="2048"><?=htmlspecialchars(implode("\n",$area))?></textarea>
+  </span>
   <?endforeach;?>
 
 </div>
 <div markdown="1" class="advanced">
 _(Syslinux configuration)_:
-: <textarea class="raw" name="raw" spellcheck="false" cols="80" rows="<?=substr_count($current,"\n")+1?>" maxlength="2048"><?=htmlspecialchars($current)?></textarea>
+: <textarea class="raw config-raw" name="raw" spellcheck="false" cols="80" rows="<?=substr_count($current,"\n")+1?>" maxlength="2048"><?=htmlspecialchars($current)?></textarea>
 
 </div>
 _(Server boot mode)_:
 : <?=is_dir('/sys/firmware/efi') ? 'UEFI' : 'Legacy'?>
 
-_(Permit UEFI boot mode)_ <input type="checkbox" name="boot" <?=is_dir('/boot/EFI')?'checked':''?>>
-: *_(Boot system in UEFI mode)_. _(Please check your system settings to support UEFI boot mode)_.*
+_(Boot system in UEFI mode)_:
+: <label>
+    <input type="checkbox" name="boot" <?=is_dir('/boot/EFI')?'checked':''?>>
+    _(Permit UEFI boot mode)_
+  </label>
+  *_(Please check your system settings to support UEFI boot mode)_.*
 
 <input type="button" value="_(Default)_" onclick="setDefault(this.form)">
-: <input type="submit" value="_(Apply)_"><input type="button" value="_(Done)_" onclick="done()">
+: <span class="inline-block">
+    <input type="submit" value="_(Apply)_">
+    <input type="button" value="_(Done)_" onclick="done()">
+  </span>
 
 :syslinux_button_help:
 
diff --git a/emhttp/plugins/dynamix/sheets/Syslinux.css b/emhttp/plugins/dynamix/sheets/Syslinux.css
index f7bcdd3d6..8f7551ca6 100644
--- a/emhttp/plugins/dynamix/sheets/Syslinux.css
+++ b/emhttp/plugins/dynamix/sheets/Syslinux.css
@@ -1,61 +1,34 @@
 :root {
-    --syslinux-span-array-border-color: #f2f2f2;
     --syslinux-textarea-menu-border-color: #f2f2f2;
 }
 
 .Theme--sidebar:root  {
-    --syslinux-span-array-border-color: #606e7f;
     --syslinux-textarea-menu-border-color: transparent;
 }
 .Theme--white:root {
-    --syslinux-span-array-border-color: #1c1c1c;
     --syslinux-textarea-menu-border-color: #1c1b1b;
 }
 
-div.basic {
+.basic {
     display: block;
 }
-div.advanced {
+.advanced {
     display: none;
 }
-textarea.raw {
-    resize: none;
-    font-family: bitstream;
-    width: 63%;
-}
 
-span.array,
-span.system {
-    margin-left: 33.33%;
-    width: 63% !important;
-    padding: 2px 10px;
+.config-item-label-wrapper {
     font-weight: bold;
-    border: 1px solid var(--syslinux-span-array-border-color);
-    border-bottom: none;
+    padding: .25rem .5rem;
+    border: none;
+    box-sizing: border-box;
 }
-textarea.menu {
-    margin-left: 33.33%;
-    width: 63% !important;
-    margin-bottom: 12px;
-    padding: 4px 10px;
+
+.config-raw,
+.config-item textarea {
     font-family: bitstream;
-}
-
-dd {
-    padding-left: 40px;
-}
-
-.Theme--black,
-.Theme--white {
-    textarea.menu {
-        border: 1px solid var(--syslinux-textarea-menu-border-color);
-        border-top: none;
-    }
-}
-
-.Theme--azure,
-.Theme--gray {
-    textarea.menu {
-        border-top: none;
-    }
+    margin-bottom: 1rem;
+    padding: .5rem 1rem;
+    border: 1px solid var(--syslinux-textarea-menu-border-color);
+    max-width: 100%;
+    resize: vertical;
 }