fix(waybar-widget): click zone too small

src/components/Waybar/WaybarWidget.tsx

@@ -6,6 +6,7 @@ export const WaybarWidget = (props: {
   tooltip?: ReactNode;
   interactable?: boolean;
   children: ReactNode;
+  onClick?: () => void;
 }) => {
   const [tooltipPosition, setTooltipPosition] = useState<{
     x: number;
@@ -42,6 +43,7 @@ export const WaybarWidget = (props: {
       onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouveMove}
       onMouseLeave={handleMouseLeave}
+      onClick={props.onClick}
     >
       {props.children}
       {props.tooltip && tooltipPosition && tooltipVisible && (

src/components/Waybar/Widgets/WaybarLockWidget.tsx

@@ -5,8 +5,12 @@ export const WaybarLockWidget = () => {
   const { setState } = useApp();
 
   return (
-    <WaybarWidget className="pl-3 pr-[0.625rem]" interactable>
+    <WaybarWidget
-      <button onClick={() => setState("login")}></button>
+      className="pl-3 pr-[0.625rem]"
+      onClick={() => setState("login")}
+      interactable
+    >
+      <button></button>
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarPowerWidget.tsx

@@ -5,8 +5,12 @@ export const WaybarPowerWidget = () => {
   const { setState } = useApp();
 
   return (
-    <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
+    <WaybarWidget
-      <button onClick={() => setState("off")}></button>
+      className="pl-[0.625rem] pr-3"
+      onClick={() => setState("off")}
+      interactable
+    >
+      <button></button>
     </WaybarWidget>
   );
 };