Common Text Truncation in Salon Booking Apps: Causes and Fixes

All of these stem from layout assumptions that treat text as static. In a salon‑booking app the content changes daily – new promotions, staff swaps, holiday hours – making static sizing a recipe for t

1. What causes text truncation in salon‑booking apps

All of these stem from layout assumptions that treat text as static. In a salon‑booking app the content changes daily – new promotions, staff swaps, holiday hours – making static sizing a recipe for truncation.

---

2. Real‑world impact

• User complaints – Reviews on the Play Store and App Store frequently mention “service names cut off”, “cannot read staff name”, or “price hidden”. A single 1‑star review can lower the overall rating enough to deter new customers.
• Store ratings – For local businesses, a drop from 4.5 ★ to 3.8 ★ can reduce click‑through on search results by 30 % (data from Google Play).
• Revenue loss – If a promotion like “Buy‑One‑Get‑One‑Free – Limited Time” is truncated, users may miss the deal and abandon the checkout flow. A 2 % conversion dip on a $200 K monthly volume equals $4 K lost.
• Brand perception – Salon owners market themselves on professionalism. A UI that hides text looks unpolished and can harm the salon’s reputation, especially for high‑end boutiques that rely on visual trust.

---

3. 5‑7 concrete examples of truncation in salon‑booking apps

1. Service list tile – The tile shows “Haircut + Beard Trim (30 min) – $45”. On devices with a narrow screen, the “+ Beard Trim (30 min) – $45” part disappears, leaving only “Haircut…”.
2. Staff profile card – “Maria González – Senior Stylist, Color Specialist”. The last name and title are cut, showing “Maria Gon…”.
3. Promotion banner – “Spring Special: 20 % off all facial treatments until May 31”. The percentage sign and date are hidden, turning the banner into “Spring Special: 20 %…”.
4. Checkout summary line – “Total (incl. taxes & fees): $123.45”. The “incl. taxes & fees” fragment is truncated, confusing users about the price composition.
5. Search autocomplete – Typing “manic” yields “Manicure – Classic French”. The “Classic French” suffix is clipped, making the suggestion ambiguous.
6. Appointment confirmation email (web view) – The email template renders a long “Appointment Details” paragraph; the last sentence (“Please arrive 10 minutes early”) is cut off on mobile browsers.
7. Accessibility label for a button – The content description reads “Book now for Deep Tissue Swedish Massage – 90 min – $120”. Screen‑reader reads only “Book now for Deep Tissue…”, denying essential pricing info to users who rely on voiceover.

---

4. How to detect text truncation

When a test fails, SUSA provides a JUnit‑compatible XML report with the element’s resource‑id, the measured vs. required width, and a screenshot highlighting the ellipsis.

---

5. How to fix each example (code‑level guidance)

1. Service list tile

*Problem*: Fixed width: 120dp in list_item_service.xml.

Fix

<!-- Use wrap_content and weight to let the text grow -->
<TextView
    android:id="@+id/tvServiceName"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:maxLines="2"
    android:ellipsize="end"
    android:textAppearance="?attr/textAppearanceBody1"/>

*Add* android:ellipsize="end" and maxLines="2" to allow a second line before truncation.

2. Staff profile card

*Problem*: android:singleLine="true" on the name view.

Fix

<TextView
    android:id="@+id/tvStaffName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:ellipsize="marquee"
    android:marqueeRepeatLimit="marquee_forever"
    android:focusable="true"
    android:focusableInTouchMode="true"/>

Switch to maxLines="1" with marquee only if scrolling is desired; otherwise allow maxLines="2".

3. Promotion banner

*Problem*: Container uses overflow: hidden in CSS.

Fix

.promo-banner {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  white-space: normal; /* allow wrap */
  overflow: visible;   /* let text spill */
}

If the design requires a single line, apply text-overflow: ellipsis; and increase the container’s min-width to accommodate the longest known promotion.

4. Checkout summary line

*Problem*: TextView set to android:lines="1" and a small textSize.

Fix

val summary = findViewById<TextView>(R.id.tvSummary)
summary.apply {
    setAutoSizeTextTypeUniformWithConfiguration(
        12, 18, 1, TypedValue.COMPLEX_UNIT_SP) // auto‑size between 12‑18sp
    maxLines = 2
}

Auto‑size ensures the text shrinks only to a readable limit before wrapping.

5. Search autocomplete

*Problem*: Autocomplete dropdown uses a fixed max-width: 150px.

Fix

.autocomplete-item {
  max-width: none;          /* remove hard cap */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* show ellipsis only when truly overflowed */
}

Alternatively, compute width based on viewport: max-width: 90vw;.

6. Appointment confirmation email (web view)

*Problem*:

element has height: 2rem and overflow: hidden.

Fix

<p style="max-height:none; overflow:auto; line-height:1.5;">
  {{appointmentDetails}}
</p>

Allow the container to grow; use line-height for readability.

7. Accessibility label for a button

*Problem*: Content description generated from a truncated TextView.

Fix

val btnBook = findViewById<Button>(R.id.btnBook)
val fullLabel = "Book now for ${service.title} – ${service.duration} – $${service.price}"
btnBook.contentDescription = fullLabel

Never derive contentDescription from the UI element; build it from the data model.

---

6. Prevention – catching truncation before release

1. Integrate SUSA into CI/CD

• Add the susatest-agent CLI step to your GitHub Actions workflow.
• Run the *Curious*, *Accessibility*, and *Adversarial* personas on every PR.
• Fail the build if any EllipsisDetected event appears in the JUnit XML report.

1. Define a “text‑fit” lint rule

• Android Lint custom rule that checks TextView attributes: maxLines must be > 1 or android:ellipsize must be set, and singleLine must be false.
• For web, use ESLint plugin eslint-plugin-jsx-a11y with a custom rule that forbids white-space: nowrap without text-overflow: ellipsis.

1. Locale‑aware UI tests

• Generate test data in the longest supported language (e.g., German compound words) and run SUSA’s *Student* persona with the device locale switched.
• Verify that element.isEllipsized() returns false.

1. Responsive design token checks

• Enforce a design token for “minimum touch target width” (48 dp) and a corresponding “max text length” (e.g., 30 characters) for each component.
• Add a Gradle task that scans layout XML for any width < token value and flags it.

1. Automated visual regression baseline

• Capture a baseline screenshot for each screen at three font scales (1.0, 1.3, 1.5).
• On each build, diff against the baseline; any pixel shift in text regions triggers a warning.

1. Accessibility audit checkpoint

• Run the WCAG 2.1 AA audit (SUSA’s *Accessibility* persona) with the “Zoom to 200 %” scenario.
• Ensure no element reports “text clipped” in the audit JSON.

1. Cross‑session learning

• Enable SUSA’s cross‑session learning flag (--learn=true). The platform remembers previously discovered truncation patterns and surfaces them earlier in subsequent runs, reducing regressions.

By embedding these safeguards—automated detection, linting, responsive testing, and SUSA’s autonomous exploration—teams eliminate text truncation early, preserve user trust, and keep salon‑booking conversions healthy.