Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

UI text overflow

オープン
  • 何か問題がありますか？
#567 コメント 8 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
35/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
css, nextjs, react, tailwindcss, typescript
領域
frontend, testing-qa

調査の方向性

app/globals.css と参照されているコンポーネントファイルを読み、issue が変更を求めている overflow の挙動を特定します。320px の viewport で tests/responsive.spec.ts を実行し、望ましい UI の変更が明確になったら、既存の width assertion を完了確認として使用します。

索引モデルが issue の本文から書いたものです。

説明

Based on the codebase, UI text overflow is primarily handled through CSS styling and responsive design patterns, with specific attention to mobile layouts.

Text Overflow Handling

Mobile Layout CSS

The mobile layout in app/globals.css includes several overflow handling mechanisms:

  • Mobile icons bar: Uses overflow-x: auto with hidden scrollbars for horizontal scrolling 1
  • Chat messages area: Uses overflow-y: auto for vertical scrolling 2
  • Text wrapping: Components use whitespace-normal and break-words for proper text flow 3
Component-Level Handling
  • Search related queries: Uses whitespace-normal and text-left for proper text wrapping 4
  • Chat input: Implements responsive maxRows (3 on mobile, 5 on desktop) to prevent excessive vertical expansion 5
  • File names: Uses truncate and max-w-xs to prevent long filenames from overflowing 6
Responsive Testing

The codebase includes specific tests for text overflow on small screens (320px width), verifying that message boxes don't exceed viewport width 7

Notes

The overflow handling is primarily CSS-based with Tailwind utilities, focusing on mobile-first responsive design. The test suite validates overflow behavior on extremely small screens (iPhone 5/SE dimensions).

Wiki pages you might want to explore:

Citations

File: app/globals.css (L136-143)

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .mobile-icons-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

File: app/globals.css (L180-188)

  .mobile-chat-messages-area {
    flex: 1; /* Changed from height: 40vh to take available space */
    overflow-y: auto;
    padding: 12px;
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    box-sizing: border-box;
    min-height: 0;
  }

File: components/calendar-notepad.tsx (L160-160)

                  <p className="text-sm whitespace-pre-wrap break-words">{note.content}</p>

File: components/search-related.tsx (L54-54)

              className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left"

File: components/chat-panel.tsx (L236-236)

            maxRows={isMobile ? 3 : 5}

File: components/chat-panel.tsx (L295-295)

            <span className="text-sm text-muted-foreground truncate max-w-xs">

File: tests/responsive.spec.ts (L211-224)

  test('should not have text overflow', async ({ page }) => {
    await page.fill('[data-testid="chat-input"]', 'This is a longer message to test text wrapping on very small mobile screens');
    await page.click('[data-testid="mobile-submit-button"]');

    const userMessage = page.locator('[data-testid="user-message"]').last();
    await expect(userMessage).toBeVisible();

    // Check that text wraps and doesn't overflow
    const messageBox = await userMessage.boundingBox();
    expect(messageBox).toBeTruthy();
    if (messageBox) {
      expect(messageBox.width).toBeLessThanOrEqual(320);
    }
  });
主要言語
TypeScript
スター
19
フォーク
7
平均マージ
55分
マージ済み PR（30日）
19

環境構築

  • Dockerfile または Docker Compose ファイルあり
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

QueueLab/QCX のほかの issue

QueueLab/QCX の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。