Skip to content

fix(styles): text-truncation utility helper - #8652

Merged
talissoncosta merged 1 commit into
mainfrom
fix/text-truncate-helper
Oct 2, 2026
Merged

fix(styles): text-truncation utility helper#8652
talissoncosta merged 1 commit into
mainfrom
fix/text-truncate-helper

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

.text-truncate has never existed in our build. Bootstrap defines it in helpers/_text-truncation.scss and we never import helpers, so the class is dead everywhere it's used.

Three components already use it: AudienceSegmentList (x2) and CsvUpload. Their markup was always correct, the class just wasn't there.

Not a no-op: long text in those three places currently overflows, and will now clip with an ellipsis.

Found while reviewing #8649, which needs this class. Merge this first.

How did you test this code?

  • .text-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden} is in the built CSS, and absent on main.
  • Checked the CSV upload with a long filename.

@talissoncosta
talissoncosta requested a review from a team as a code owner October 1, 2026 16:34
@talissoncosta
talissoncosta requested review from kyle-ssg and removed request for a team October 1, 2026 16:34
@vercel

vercel Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
flagsmith-frontend-preview Ready Ready Preview Oct 1, 2026 4:48pm UTC
flagsmith-frontend-staging Ready Ready Preview Oct 1, 2026 4:48pm UTC
1 Skipped Deployment
Project Deployment Actions Updated
docs Ignored Ignored Preview Oct 1, 2026 4:48pm UTC

Request Review

@github-actions github-actions Bot added the front-end Issue related to the React Front End Dashboard label Oct 1, 2026
@coderabbitai

coderabbitai Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown

Review in Change Stack →

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

🧰 Additional context used
📚 Code guidelines (1) 
frontend/CLAUDE.md — auto-discovered

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Advanced

Run ID: bba6b436-b232-48d9-8e7d-fbdf78edd577

📥 Commits

Reviewing files that changed from the base of the PR and between f1641be and bb60d3d.

📒 Files selected for processing (1)
  • frontend/web/styles/3rdParty/_bootstrap.scss

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 6 remain after this review.

📝 Walkthrough

Walkthrough

The Bootstrap stylesheet now imports the text-truncation helper after the type stylesheet. The helper defines .text-truncate.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to bb60d

The shared frontend stylesheet now provides the truncation helper for existing views. Source and build configuration support the change, with no concrete merge-blocking issue identified.

Architecture Summary

Architecture risk: 🔵 Low · up to bb60d

The change affects 1 system.

Changed systems: frontend

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

  • observed — frontend (ui) was modified; 1 changed file maps to changed impact.

Before / after behavior

  • observed — Modified behavior in frontend/web/styles/3rdParty/_bootstrap.scss: Adds Bootstrap’s text-truncation helper import and a comment noting that .text-truncate is not provided by the type import.
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-8652 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-8652 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-8652 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-8652 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-8652 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-8652 Finished ✅ Results ✅

@github-actions github-actions Bot added the fix label Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21102 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  37.4 seconds
commit  bb60d3d
info  🔄 Run: #21102 (attempt 1)

🗂️ Previous results
✅ private-cloud · depot-ubuntu-latest-16 — run #21102 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  40.6 seconds
commit  bb60d3d
info  🔄 Run: #21102 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #21102 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  36.5 seconds
commit  bb60d3d
info  🔄 Run: #21102 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #21102 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  31 seconds
commit  bb60d3d
info  🔄 Run: #21102 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-16 — run #21101 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  48.4 seconds
commit  f1641be
info  🔄 Run: #21101 (attempt 1)

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #21101 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  36.3 seconds
commit  f1641be
info  🔄 Run: #21101 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #21101 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  41.8 seconds
commit  f1641be
info  🔄 Run: #21101 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #21101 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  39.9 seconds
commit  f1641be
info  🔄 Run: #21101 (attempt 1)

@github-actions

github-actions Bot commented Oct 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Visual Regression

19 screenshots compared. See report for details.
View full report

@talissoncosta talissoncosta changed the title fix(styles): import the Bootstrap text-truncation helper fix(styles): text-truncation utility helper Oct 1, 2026
@talissoncosta @claude
fix(styles): import the Bootstrap text-truncation helper
bb60d3d 
.text-truncate is defined in bootstrap/scss/helpers/_text-truncation.scss,
and we import type, containers, grid and the rest but never helpers. So the
class has never existed, and every call site using it silently does nothing.

Three components already use it, each with the surrounding markup written
correctly for it: AudienceSegmentList twice and CsvUpload once. They start
truncating with an ellipsis instead of overflowing, which is what their
markup was always asking for.

Refs #8649

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@talissoncosta
talissoncosta force-pushed the fix/text-truncate-helper branch from f1641be to bb60d3d Compare October 1, 2026 16:47
@github-actions github-actions Bot added fix and removed fix labels Oct 1, 2026
@talissoncosta talissoncosta mentioned this pull request Oct 1, 2026
Merged
4 tasks done
Zaimwa9
Zaimwa9 approved these changes Oct 2, 2026
View reviewed changes

@Zaimwa9 Zaimwa9 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving but let's avoid this kind of comment

@talissoncosta
talissoncosta merged commit 759f724 into main Oct 2, 2026
30 checks passed
@talissoncosta
talissoncosta deleted the fix/text-truncate-helper branch October 2, 2026 11:35
@flagsmith-engineering flagsmith-engineering Bot mentioned this pull request Oct 2, 2026
Merged

This branch was successfully deployed

2 active deployments
Preview – flagsmith-frontend-preview — bb60d3d2 Deployed Oct 1, 2026 by vercel[bot]
View deployment
Preview – flagsmith-frontend-staging — bb60d3d2 Deployed Oct 1, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Zaimwa9 Zaimwa9 Zaimwa9 approved these changes
@kyle-ssg kyle-ssg Awaiting requested review from kyle-ssg kyle-ssg is a code owner automatically assigned from Flagsmith/flagsmith-front-end
@khvn26 khvn26 Awaiting requested review from khvn26

Assignees

No one assigned

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@talissoncosta @Zaimwa9