chore(sites): Improved tabbed example mdx component

sites/shared/components/tabs.mjs

@@ -32,12 +32,9 @@ 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`}
+              key={tabId}
+              className={btnClasses}
               onClick={() =>
                 setModal(
                   <ModalWrapper
@@ -51,9 +48,9 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) =>
                 )
               }
             >
+              <span className="pr-2">{title}</span>
               <KioskIcon className="w-6 h-6 hover:text-secondary" />
             </button>
-            </div>
           ) : (
             <button key={tabId} className={btnClasses} onClick={() => setActiveTab(tabId)}>
               {title}