add diabledMessage to TabbedContent

src/components/Button.tsx

@@ -33,7 +33,7 @@ export const Button = ({
       disabled={disabled}
       {...rest}
     >
-      <div className="m-auto flex items-center gap-2 font-medium">
+      <div className="m-auto flex shrink-0 items-center gap-2 font-medium">
         {iconBefore}
         {children}
         {iconAfter}

src/components/NewDevice.tsx

@@ -13,20 +13,24 @@ export const NewDevice = () => {
       name: "BLE",
       icon: <FiBluetooth className="h-4" />,
       element: BLE,
-      disabled: !navigator.bluetooth
+      disabled: !navigator.bluetooth,
+      disabledMessage:
+        "WebBluetooth is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility",
     },
     {
       name: "HTTP",
       icon: <FiWifi className="h-4" />,
       element: HTTP,
-      disabled: false
+      disabled: false,
     },
     {
       name: "Serial",
       icon: <FiTerminal className="h-4" />,
       element: Serial,
-      disabled: !navigator.serial
+      disabled: !navigator.serial,
-    }
+      disabledMessage:
+        "WebSerial is currently only supported by Chromium based browsers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility",
+    },
   ]);
 
   return (

src/components/layout/page/TabbedContent.tsx

@@ -1,14 +1,15 @@
 import type React from "react";
 import { Fragment } from "react";
 
-import { Tab } from "@headlessui/react";
 import { Mono } from "@app/components/Mono";
+import { Tab } from "@headlessui/react";
 
 export interface TabType {
   name: string;
   icon?: JSX.Element;
   element: () => JSX.Element;
   disabled?: boolean;
+  disabledMessage?: string;
 }
 
 export interface TabbedContentProps {
@@ -42,7 +43,7 @@ export const TabbedContent = ({
             )}
           </Tab>
         ))}
-        <div className="ml-auto">
+        <div className="ml-auto flex gap-2">
           {actions?.map((Action, index) => (
             <Action key={index} />
           ))}
@@ -51,10 +52,10 @@ export const TabbedContent = ({
       <Tab.Panels as={Fragment}>
         {tabs.map((entry, index) => (
           <Tab.Panel key={index} className="flex flex-grow">
-            {!entry.disabled ? <entry.element /> : (
+            {!entry.disabled ? (
-              <Mono>
+              <entry.element />
-                This functionality is not supported in your browser.
+            ) : (
-              </Mono>
+              <Mono>{entry.disabledMessage}</Mono>
             )}
           </Tab.Panel>
         ))}