cleanup macrobar

ui/src/components/MacroBar.tsx

@@ -27,7 +27,9 @@ export default function MacroBar() {
   return (
     <Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
       <div className="flex items-center gap-x-2 py-1.5">
-        <LuCommand className="h-4 w-4 text-slate-500 mr-1" />
+        <div className="absolute -ml-5">
+          <LuCommand className="h-4 w-4 text-slate-500" />
+        </div>
         <div className="flex flex-wrap gap-2">
           {macros.map(macro => (
             <Button

ui/src/components/MacroForm.tsx

@@ -336,6 +336,12 @@ export function MacroForm({
               </div>
 
               <div className="flex justify-end gap-x-2">
+                <Button
+                  size="SM"
+                  theme="blank"
+                  text="Cancel"
+                  onClick={() => setShowDeleteConfirm(false)}
+                />
                 <Button
                   size="SM"
                   theme="danger"
@@ -346,12 +352,6 @@ export function MacroForm({
                   }}
                   disabled={isDeleting}
                 />
-                <Button
-                  size="SM"
-                  theme="light"
-                  text="Cancel"
-                  onClick={() => setShowDeleteConfirm(false)}
-                />
               </div>
             </div>
           </div>

ui/src/components/WebRTCVideo.tsx

@@ -528,16 +528,18 @@ export default function WebRTCVideo() {
   return (
     <div className="grid h-full w-full grid-rows-layout">
       <div className="min-h-[39.5px] flex flex-col">
-        <fieldset disabled={peerConnectionState !== "connected"}>
+        <div className="flex flex-col">
-          <Actionbar
+          <fieldset disabled={peerConnectionState !== "connected"} className="contents">
-            requestFullscreen={async () =>
+            <Actionbar
-              videoElm.current?.requestFullscreen({
+              requestFullscreen={async () =>
-                navigationUI: "show",
+                videoElm.current?.requestFullscreen({
-              })
+                  navigationUI: "show",
-            }
+                })
-          />
+              }
-          <MacroBar />
+            />
-        </fieldset>
+            <MacroBar />
+          </fieldset>
+        </div>
       </div>
 
       <div

ui/src/routes/devices.$id.settings.macros.tsx

@@ -126,7 +126,7 @@ export default function SettingsMacrosRoute() {
               <h3 className="truncate text-sm font-semibold text-black dark:text-white">
                 {macro.name}
               </h3>
-              <p className="mt-1 ml-2 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
+              <p className="mt-1 ml-4 text-xs text-slate-500 dark:text-slate-400 overflow-hidden">
                 <span className="flex flex-col items-start gap-1">
                   {macro.steps.map((step, stepIndex) => {
                     const StepIcon = stepIndex === 0 ? LuMoveRight : LuCornerDownRight;
@@ -154,7 +154,7 @@ export default function SettingsMacrosRoute() {
 
                               {Array.isArray(step.keys) && step.keys.map((key, idx) => (
                                 <Fragment key={`key-${idx}`}>
-                                  <span className="font-medium text-blue-600 dark:text-blue-200">
+                                  <span className="font-medium text-blue-600 dark:text-blue-400">
                                     {keyDisplayMap[key] || key}
                                   </span>
                                   {idx < step.keys.length - 1 && (
@@ -210,16 +210,18 @@ export default function SettingsMacrosRoute() {
           title="Macros"
           description={`${loading ? '?' : macros.length}/${MAX_TOTAL_MACROS}`}
         >
-          <div className="flex items-center gap-2">
+          { macros.length > 0 && (
-            <Button
+            <div className="flex items-center gap-2">
-              size="SM"
+              <Button
-              theme="primary"
+                size="SM"
-              text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
+                theme="primary"
-              onClick={() => navigate("add")}
+                text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
-              disabled={isMaxMacrosReached}
+                onClick={() => navigate("add")}
-              aria-label="Add new macro"
+                disabled={isMaxMacrosReached}
-            />
+                aria-label="Add new macro"
-          </div>
+              />
+            </div>
+          )}
         </SettingsItem>
       </div>
 
@@ -235,7 +237,6 @@ export default function SettingsMacrosRoute() {
         ) : macros.length === 0 ? (
           <EmptyCard
             headline="No macros created yet"
-            description="Create keyboard macros to automate repetitive tasks"
             BtnElm={
               <Button
                 size="SM"