From 195e6b61f9ba509943555f2a09c5a1fd0dfecca9 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 18 Aug 2023 23:23:12 +0200
Subject: [PATCH] fix settings style for right panel

---
 website/src/repl/Footer.jsx | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index f2b5369b..9faf4d3c 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -430,14 +430,21 @@ function SettingsTab({ scheduler }) {
           />
         </FormItem>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <FormItem label="Keybindings">
-          <ButtonGroup
-            value={keybindings}
-            onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-            items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
-          ></ButtonGroup>
-        </FormItem>
+      <FormItem label="Keybindings">
+        <ButtonGroup
+          value={keybindings}
+          onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+        ></ButtonGroup>
+      </FormItem>
+      <FormItem label="Footer Position">
+        <ButtonGroup
+          value={panelPosition}
+          onChange={(value) => settingsMap.setKey('panelPosition', value)}
+          items={{ bottom: 'Bottom', right: 'Right' }}
+        ></ButtonGroup>
+      </FormItem>
+      <FormItem label="Code Settings">
         <Checkbox
           label="Display line numbers"
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
@@ -453,14 +460,7 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
           value={isLineWrappingEnabled}
         />
-        <FormItem label="Footer Position">
-          <ButtonGroup
-            value={panelPosition}
-            onChange={(value) => settingsMap.setKey('panelPosition', value)}
-            items={{ bottom: 'Bottom', right: 'Right' }}
-          ></ButtonGroup>
-        </FormItem>
-      </div>
+      </FormItem>
       <FormItem label="Reset Settings">
         <button
           className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"