Kaynağa Gözat

feat(desktop): fix clipped labels and branch tooltip (#35724)

Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
usrnk1 1 ay önce
ebeveyn
işleme
dd02cea9e7

+ 1 - 1
packages/app/src/components/prompt-input.tsx

@@ -2341,7 +2341,7 @@ function ModelControlContent(props: { state: ComposerModelControlState; v2?: boo
           />
           />
         )}
         )}
       </Show>
       </Show>
-      <span class="truncate">{props.state.modelName}</span>
+      <span class="truncate leading-4">{props.state.modelName}</span>
       <span class={props.v2 ? "-ml-0.5 -mr-1 flex shrink-0" : "-ml-1 shrink-0 flex size-fit"}>
       <span class={props.v2 ? "-ml-0.5 -mr-1 flex shrink-0" : "-ml-1 shrink-0 flex size-fit"}>
         <Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
         <Icon name="chevron-down" size="small" class="text-v2-icon-icon-muted" />
       </span>
       </span>

+ 12 - 4
packages/app/src/components/prompt-workspace-selector.tsx

@@ -1,5 +1,6 @@
 import { For, Show } from "solid-js"
 import { For, Show } from "solid-js"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { getFilename } from "@opencode-ai/core/util/path"
@@ -96,10 +97,17 @@ export function PromptWorkspaceSelector(props: {
         {(branch) => (
         {(branch) => (
           <>
           <>
             <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
             <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-            <div class="flex h-7 min-w-0 max-w-[220px] items-center gap-1.5 px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px]">
-              <Icon name="branch" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-              <span class="min-w-0 truncate">{branch()}</span>
-            </div>
+            <TooltipV2
+              placement="top"
+              value={branch()}
+              class="min-w-0 max-w-[220px]"
+              contentClass="max-w-[calc(100vw-32px)] break-all"
+            >
+              <div class="flex h-7 min-w-0 max-w-[220px] items-center gap-1.5 px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px]">
+                <Icon name="branch" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+                <span class="min-w-0 truncate">{branch()}</span>
+              </div>
+            </TooltipV2>
           </>
           </>
         )}
         )}
       </Show>
       </Show>