From 2d37cc6ee5bf6fcae6cecdbfe73aca6964ef796e Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 7 Jan 2024 16:33:38 +0100
Subject: [PATCH] chore(sites): Improved tabbed example mdx component

---
 sites/shared/components/tabs.mjs | 41 +++++++++++++++-----------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/sites/shared/components/tabs.mjs b/sites/shared/components/tabs.mjs
index 98c17e5f73e..445c89f3996 100644
--- a/sites/shared/components/tabs.mjs
+++ b/sites/shared/components/tabs.mjs
@@ -32,28 +32,25 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) =>
           }`
 
           return withModal && activeTab === tabId ? (
-            <div className={`flex flex-row justify-between w-1/${tablist.length}`}>
-              <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
-                {title}
-              </button>
-              <button
-                className={`${btnClasses} px-0`}
-                onClick={() =>
-                  setModal(
-                    <ModalWrapper
-                      flex="col"
-                      justify="top lg:justify-center"
-                      slideFrom="right"
-                      fullWidth
-                    >
-                      {childrenWithTabSetter}
-                    </ModalWrapper>
-                  )
-                }
-              >
-                <KioskIcon className="w-6 h-6 hover:text-secondary" />
-              </button>
-            </div>
+            <button
+              key={tabId}
+              className={btnClasses}
+              onClick={() =>
+                setModal(
+                  <ModalWrapper
+                    flex="col"
+                    justify="top lg:justify-center"
+                    slideFrom="right"
+                    fullWidth
+                  >
+                    {childrenWithTabSetter}
+                  </ModalWrapper>
+                )
+              }
+            >
+              <span className="pr-2">{title}</span>
+              <KioskIcon className="w-6 h-6 hover:text-secondary" />
+            </button>
           ) : (
             <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
               {title}