Resolving Perspective SVG Text Clipping on Mobile Screens

Where does the text actually get cut off?

Follow the render path from the outside in. The session sizes the view to the device viewport. The view sizes its container. The container sizes each child box. Inside the SVG, the viewBox maps drawing coordinates onto that child box, and the text element is painted inside the viewBox. A clip can happen at any of three boundaries: the container edge, the SVG component box, or the viewBox edge. On a large screen every box has spare width, so nothing crosses a boundary. On a phone the boxes shrink, and the first boundary the content crosses is where the text gets cut.

The reported pattern (a rounded-box indicator with text that looks correct on desktop, then scales down on mobile with the right end missing) nearly always comes from one of two causes. Either margins push the scaled SVG past a container that has overflow set to hidden, or the viewBox copied from another project is narrower than the new text. The most reliable fix is to drop the SVG for this kind of indicator and build it from a styled Label component.

Why does the SVG shrink while the container still clips it?

An SVG scales uniformly to fit the smallest dimension of its box. It does not reflow. When the container gets narrower, the drawing shrinks to fit the width, and the text shrinks with it because SVG text is geometry, not flowed text. The drawing then floats inside the leftover space according to the alignment setting (preserveAspectRatio in SVG terms). Fixed-pixel margins do not scale. On a narrow screen, the scaled SVG plus its margins can be wider than the container, and with overflow hidden the container clips the right edge.

Which checks isolate the clipping layer?

Work outside-in, one boundary at a time. Run the checks in a browser session so you can resize freely.

1. Open the session in a desktop browser, open the developer tools, and switch to a responsive device width that reproduces the clip.
2. Inspect the indicator element. Compare the rendered width of the SVG element, plus its margins, against the content width of the parent container.
3. Temporarily set the parent container's overflow to visible. If the missing text reappears outside the container edge, the container is doing the clipping.
4. Set the SVG margins to zero. If the clip disappears, the margins are pushing the SVG over the boundary.
5. If the text is still cut with overflow visible and zero margins, open the SVG's viewBox and compare its width against the text extent. A viewBox sized for the original project's shorter string clips longer text at the SVG's own edge.
6. Check the structure: one SVG per indicator in its own container, or several indicators in a single SVG. A single SVG holding three box-and-text pairs scales as one unit and cannot rearrange itself for a narrow screen.

Which approach should carry the indicator?

Three approaches will work. They differ in how much layout control you keep when the view resizes.

Use approach C for simple rounded-box or circular status indicators. Styled labels perform as well as SVGs, and they sit in the normal layout flow. There is no viewBox stretching the drawing and no alignment property floating it. Keep SVGs for real graphics that CSS cannot draw, such as equipment symbols or piping. Use approach B when the graphic has to stay an SVG.

How do I build the styled-label indicator?

1. Delete the SVG and drop a Label component into the same container slot.
2. Set the Label's text to the indicator text. For a color-only indicator, leave the text blank.
3. Add a binding on the Label's background color that maps the state value to colors. An expression or map transform on the status tag works for this.
4. Set the corner radius for a rounded box. For a circle, give the Label equal width and height and set the radius to 50%. A circle is a square with 50% border radius.
5. Optional: add a subtle linear gradient to the fill for depth.
6. Set the font size in a viewport-relative unit, or clamp it, so the text scales with screen width but stays readable.
7. In the parent flex container, set the Label's basis and shrink so it can narrow without being pushed out. Drop fixed-pixel margins in favor of container gap or padding.

/* Label style, CSS equivalent; example values, tune per view */
background-color: (bound to state);
border-radius: 8px;            /* 50% for a circle */
background-image: linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0.15));
font-size: clamp(12px, 2vw, 20px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 4px 8px;

With text-overflow: ellipsis, text that truly cannot fit shows a visible ellipsis instead of a silent hard clip. That makes an undersized layout obvious in testing instead of in production.

Which pitfalls come back on resized views?

How do I verify the fix at every screen width?

1. Open the view in a browser session and step through the narrowest phone width, a tablet width, and full desktop width using responsive mode.
2. At each width, inspect the indicator. Confirm its rendered box, including padding, sits inside the parent container's content box with no horizontal overflow.
3. Change the bound state value and confirm the background color follows it at each width.
4. Enter the longest text string the indicator will ever show. Confirm it either fits or ends in a visible ellipsis, never a hard clip.
5. Open the view on the actual mobile device and confirm the result matches the browser's narrow-width rendering.

FAQ