fix: adjust project path tooltip placement

Move the desktop project path tooltip above the header and tune spacing/offset; add content style hooks to Tooltip for max-width and horizontal shift.

Author: iamdavidhill

packages/app/src/pages/layout.tsx

@@ -1627,7 +1627,16 @@ export default function Layout(props: ParentProps) {
                           stopPropagation
                         />
 
-                        <Tooltip placement="right" value={project()?.worktree} class="shrink-0">
+                        <Tooltip
+                          placement={sidebarProps.mobile ? "bottom" : "top"}
+                          gutter={2}
+                          value={project()?.worktree}
+                          class="shrink-0"
+                          contentStyle={{
+                            "max-width": "640px",
+                            transform: "translate3d(52px, 0, 0)",
+                          }}
+                        >
                           <span class="text-12-regular text-text-base truncate">
                             {project()?.worktree.replace(homedir(), "~")}
                           </span>

packages/ui/src/components/tooltip.tsx

@@ -5,6 +5,8 @@ import type { ComponentProps } from "solid-js"
 export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
   value: JSX.Element
   class?: string
+  contentClass?: string
+  contentStyle?: JSX.CSSProperties
   inactive?: boolean
 }
 
@@ -30,7 +32,7 @@ export function TooltipKeybind(props: TooltipKeybindProps) {
 
 export function Tooltip(props: TooltipProps) {
   const [open, setOpen] = createSignal(false)
-  const [local, others] = splitProps(props, ["children", "class", "inactive"])
+  const [local, others] = splitProps(props, ["children", "class", "contentClass", "contentStyle", "inactive"])
 
   const c = children(() => local.children)
 
@@ -58,7 +60,12 @@ export function Tooltip(props: TooltipProps) {
             {c()}
           </KobalteTooltip.Trigger>
           <KobalteTooltip.Portal>
-            <KobalteTooltip.Content data-component="tooltip" data-placement={props.placement}>
+            <KobalteTooltip.Content
+              data-component="tooltip"
+              data-placement={props.placement}
+              class={local.contentClass}
+              style={local.contentStyle}
+            >
               {others.value}
               {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */}
             </KobalteTooltip.Content>