UI: long transcription profile description overflows profile selector dialog

Open Beginner friendly
  • Is something wrong?
#506 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
80/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, tailwindcss, typescript
Domain
frontend

Research direction

Start with web/frontend/src/components/TranscribeDDialog.tsx, where the profile description is rendered in a SelectItem, and check how the surrounding flex layout constrains its width. Reproduce the issue with a long profile description, then add a layout regression test. Done means the dialog and its action controls stay within the visible width and the description wraps or truncates within the selector.

Written by the indexing model from the issue text.

Description

Problem

In Scriberr v1.2.0, a transcription profile with a moderately long description can make the Transcribe with Profile dialog overflow horizontally. The profile description is clipped rather than constrained to the menu width, and the dialog's action controls can appear shifted beyond the visible boundary.

This is a UI layout issue; the transcription profile and processing settings remain valid.

Reproduction

  1. Open Settings > Transcription.
  2. Create a transcription profile named General transcription.
  3. Give it a description such as Audio transcription for conversations, meetings and educational recordings in multiple languages.
  4. Set the profile as the default.
  5. Open Transcribe with Profile for an uploaded recording.
  6. Observe the selected profile's description and the dialog's action buttons.

Actual result

A longer description does not truncate within the available width. The selected profile's content appears clipped and the dialog can overflow horizontally, with the Cancel and Start Transcription controls partly outside the visible bounds.

Expected result

The dialog should remain within its defined width and the controls should stay visible at all supported viewport sizes. Descriptions should either wrap or truncate within the available space without changing the width of the profile selector.

Source code pointer

web/frontend/src/components/TranscribeDDialog.tsx renders the profile description inside a SelectItem with a truncate class, but the surrounding flex container does not appear to constrain its intrinsic width (for example, via min-w-0 and an explicit maximum width).

Please consider enforcing a bounded width for the selected value and dropdown items, and adding a layout regression test using a long description.

Workaround: Shortening the profile description restores the expected layout. Thanks for reviewing!

Dominant language
Go
Stars
3.1k
Forks
270
No merged PRs in 30d

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rishikanthc/Scriberr

All issues in rishikanthc/Scriberr

Similar issues

More Go issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.