fix(app): keep long sidebar actions inside narrow cards

Wrapping the row still lets a single translated action exceed its available width. Bound each empty-state action to the row and allow its label to shrink and wrap.

Co-authored-by: Vyacheslav Scherbinin <gentslava@mail.ru>

packages/app/src/components/sidebar/empty-states.browser.test.tsx

@@ -1,8 +1,9 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getAllByRole } from "@testing-library/dom";
 import { i18n as testI18n } from "@/i18n/i18next";
-import { DEFAULT_SIDEBAR_WIDTH } from "@/stores/panel-store";
+import { DEFAULT_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "@/stores/panel-store";
 import { SidebarProjectEmptyState } from "./empty-states";
 
 // App sources compile against the classic JSX runtime, which expects React on the global.
@@ -28,6 +29,9 @@ async function mountEmptyState(language: string, width: number): Promise<HTMLEle
 
   const container = document.createElement("div");
   container.style.width = `${width}px`;
+  // Match the workspace list's horizontal inset around the card.
+  container.style.paddingInline = "6px";
+  container.style.boxSizing = "border-box";
   document.body.appendChild(container);
   const root = createRoot(container);
   act(() => root.render(<SidebarProjectEmptyState />));
@@ -40,22 +44,42 @@ async function mountEmptyState(language: string, width: number): Promise<HTMLEle
   return card;
 }
 
-// Translations of "Add project" and "Import session" can be wider than the default sidebar, so the
-// action row has to wrap instead of pushing the second button past the card's border.
-describe("SidebarProjectEmptyState", () => {
-  it.each([
-    ["ru", DEFAULT_SIDEBAR_WIDTH],
-    ["en", DEFAULT_SIDEBAR_WIDTH],
-  ])("keeps every action inside the card (%s, %ipx sidebar)", async (language, width) => {
-    const card = await mountEmptyState(language, width);
-    const cardRect = card.getBoundingClientRect();
-    const buttons = Array.from(card.querySelectorAll<HTMLElement>('[role="button"]'));
+function expectActionsInsideCard(card: HTMLElement) {
+  const cardRect = card.getBoundingClientRect();
+  const buttons = getAllByRole(card, "button");
 
-    expect(buttons).toHaveLength(2);
-    for (const button of buttons) {
-      const rect = button.getBoundingClientRect();
-      expect(rect.left).toBeGreaterThanOrEqual(cardRect.left);
-      expect(rect.right).toBeLessThanOrEqual(cardRect.right);
+  expect(buttons).toHaveLength(2);
+  for (const button of buttons) {
+    const rect = button.getBoundingClientRect();
+    expect(rect.left).toBeGreaterThanOrEqual(cardRect.left);
+    expect(rect.right).toBeLessThanOrEqual(cardRect.right);
+
+    // Containing the button must also keep the whole label readable, without clipping.
+    const label = document.createRange();
+    label.selectNodeContents(button);
+    for (const fragment of Array.from(label.getClientRects())) {
+      expect(fragment.left).toBeGreaterThanOrEqual(rect.left);
+      expect(fragment.right).toBeLessThanOrEqual(rect.right);
+      expect(fragment.top).toBeGreaterThanOrEqual(rect.top);
+      expect(fragment.bottom).toBeLessThanOrEqual(rect.bottom);
     }
+  }
+}
+
+describe("SidebarProjectEmptyState", () => {
+  const cases = ["en", "ru", "fr", "ja", "es", "pt-BR", "ar", "ko", "zh-CN"].flatMap((language) =>
+    [MIN_SIDEBAR_WIDTH, DEFAULT_SIDEBAR_WIDTH].map((width) => ({ language, width })),
+  );
+  it.each(cases)(
+    "keeps every action inside the card ($language, $width px sidebar)",
+    async ({ language, width }) => {
+      expectActionsInsideCard(await mountEmptyState(language, width));
+    },
+  );
+
+  it("keeps English actions on one row when they fit", async () => {
+    const card = await mountEmptyState("en", DEFAULT_SIDEBAR_WIDTH);
+    const [addProject, importSession] = getAllByRole(card, "button");
+    expect(addProject.getBoundingClientRect().top).toBe(importSession.getBoundingClientRect().top);
   });
 });

packages/app/src/components/sidebar/empty-states.tsx

@@ -54,7 +54,13 @@ export function SidebarFilterEmptyState() {
       title={t("sidebar.filterEmpty.title")}
       description={t("sidebar.filterEmpty.description")}
     >
-      <Button variant="secondary" size="xs" onPress={clearFilters}>
+      <Button
+        variant="secondary"
+        size="xs"
+        style={styles.action}
+        textStyle={styles.actionText}
+        onPress={clearFilters}
+      >
         {t("sidebar.filterEmpty.clear")}
       </Button>
     </SidebarEmptyStateCard>
@@ -76,10 +82,24 @@ export function SidebarProjectEmptyState({
       title={t("sidebar.project.empty.title")}
       description={t("sidebar.project.empty.description")}
     >
-      <Button variant="secondary" size="xs" leftIcon={Plus} onPress={onAddProject}>
+      <Button
+        variant="secondary"
+        size="xs"
+        leftIcon={Plus}
+        style={styles.action}
+        textStyle={styles.actionText}
+        onPress={onAddProject}
+      >
         {t("sidebar.actions.addProject")}
       </Button>
-      <Button variant="outline" size="xs" leftIcon={Import} onPress={onImportSession}>
+      <Button
+        variant="outline"
+        size="xs"
+        leftIcon={Import}
+        style={styles.action}
+        textStyle={styles.actionText}
+        onPress={onImportSession}
+      >
         {t("importSession.title")}
       </Button>
     </SidebarEmptyStateCard>
@@ -103,6 +123,12 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     marginTop: theme.spacing[4],
   },
+  action: {
+    maxWidth: "100%",
+  },
+  actionText: {
+    flexShrink: 1,
+  },
   title: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,