fix: tooltip overflow (#269)

* fix: tooltip overflow

* Adds more responsive Css

* StartHidden has tooltip bottom

* in debug setting too

---------

Co-authored-by: CJ Pais <cj@cjpais.com>

src/components/settings/HandyShortcut.tsx

@@ -273,6 +273,7 @@ export const HandyShortcut: React.FC<HandyShortcutProps> = ({
       description="Set the keyboard shortcut to start and stop speech-to-text recording"
       descriptionMode={descriptionMode}
       grouped={grouped}
+      tooltipPosition="bottom"
     >
       {(() => {
         const primaryBinding = Object.values(bindings)[0];

src/components/settings/PasteMethod.tsx

@@ -14,30 +14,30 @@ const pasteMethodOptions = [
   { value: "direct", label: "Direct" },
 ];
 
-export const PasteMethodSetting: React.FC<PasteMethodProps> = React.memo(({
+export const PasteMethodSetting: React.FC<PasteMethodProps> = React.memo(
-  descriptionMode = "tooltip",
+  ({ descriptionMode = "tooltip", grouped = false }) => {
-  grouped = false,
+    const { getSetting, updateSetting, isUpdating } = useSettings();
-}) => {
-  const { getSetting, updateSetting, isUpdating } = useSettings();
 
-  const selectedMethod = (getSetting("paste_method") ||
+    const selectedMethod = (getSetting("paste_method") ||
-    "ctrl_v") as PasteMethod;
+      "ctrl_v") as PasteMethod;
 
-  return (
+    return (
-    <SettingContainer
+      <SettingContainer
-      title="Paste Method"
+        title="Paste Method"
-      description="Clipboard (Ctrl+V) simulates Ctrl/Cmd+V keystrokes to paste from your clipboard. Direct tries to use system input methods if possible, otherwise inputs keystrokes one by one into the text field."
+        description="Clipboard (Ctrl+V) simulates Ctrl/Cmd+V keystrokes to paste from your clipboard. Direct tries to use system input methods if possible, otherwise inputs keystrokes one by one into the text field."
-      descriptionMode={descriptionMode}
+        descriptionMode={descriptionMode}
-      grouped={grouped}
+        grouped={grouped}
-    >
+        tooltipPosition="bottom"
-      <Dropdown
+      >
-        options={pasteMethodOptions}
+        <Dropdown
-        selectedValue={selectedMethod}
+          options={pasteMethodOptions}
-        onSelect={(value) =>
+          selectedValue={selectedMethod}
-          updateSetting("paste_method", value as PasteMethod)
+          onSelect={(value) =>
-        }
+            updateSetting("paste_method", value as PasteMethod)
-        disabled={isUpdating("paste_method")}
+          }
-      />
+          disabled={isUpdating("paste_method")}
-    </SettingContainer>
+        />
-  );
+      </SettingContainer>
-});
+    );
+  },
+);

src/components/settings/StartHidden.tsx

@@ -24,6 +24,7 @@ export const StartHidden: React.FC<StartHiddenProps> = React.memo(({
       description="Launch to system tray without opening the window."
       descriptionMode={descriptionMode}
       grouped={grouped}
+      tooltipPosition="bottom"
     />
   );
 });

src/components/ui/SettingContainer.tsx

@@ -8,6 +8,7 @@ interface SettingContainerProps {
   grouped?: boolean;
   layout?: "horizontal" | "stacked";
   disabled?: boolean;
+  tooltipPosition?: "top" | "bottom";
 }
 
 export const SettingContainer: React.FC<SettingContainerProps> = ({
@@ -18,6 +19,7 @@ export const SettingContainer: React.FC<SettingContainerProps> = ({
   grouped = false,
   layout = "horizontal",
   disabled = false,
+  tooltipPosition = "top",
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -162,11 +164,11 @@ export const SettingContainer: React.FC<SettingContainerProps> = ({
                 />
               </svg>
               {showTooltip && (
-                <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-background border border-mid-gray/80 rounded-lg shadow-lg z-50 max-w-xs min-w-[200px] whitespace-normal animate-in fade-in-0 zoom-in-95 duration-200">
+                <div className={`absolute ${tooltipPosition === "top" ? "bottom-full" : "top-[150%]"} left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-background border border-mid-gray/80 rounded-lg shadow-lg z-50 max-w-xs min-w-[200px] whitespace-normal animate-in fade-in-0 zoom-in-95 duration-200`}>
                   <p className="text-sm text-center leading-relaxed">
                     {description}
                   </p>
-                  <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent border-t-mid-gray/80"></div>
+                  <div className={`absolute ${tooltipPosition === "top" ? "top-full" : "bottom-full rotate-180"} left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent border-t-mid-gray/80`}></div>
                 </div>
               )}
             </div>

src/components/ui/ToggleSwitch.tsx

@@ -10,6 +10,7 @@ interface ToggleSwitchProps {
   description: string;
   descriptionMode?: "inline" | "tooltip";
   grouped?: boolean;
+  tooltipPosition?: "top" | "bottom";
 }
 
 export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
@@ -21,6 +22,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   description,
   descriptionMode = "tooltip",
   grouped = false,
+  tooltipPosition = "top",
 }) => {
   return (
     <SettingContainer
@@ -29,6 +31,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
       descriptionMode={descriptionMode}
       grouped={grouped}
       disabled={disabled}
+      tooltipPosition={tooltipPosition}
     >
       <label
         className={`inline-flex items-center ${disabled || isUpdating ? "cursor-not-allowed" : "cursor-pointer"}`}