Investigate a broken mobile layout

Create a controlled example on the local demo

Open Codable → Console. Review this snippet, then run it only on the bundled demo. It adds a small sample table with a deliberately fixed width. It makes no network request and contains no private data. Reload the demo to remove it.

(() => {
  const panel = document.querySelector('[data-panel="elements"]');
  if (!panel) return "Open the Codable local demo first.";
  document.querySelector("#wide-demo")?.remove();
  const table = document.createElement("table");
  table.id = "wide-demo";
  table.style.width = "900px";
  table.innerHTML = "<tr><th>Item</th><th>Status</th><th>Owner</th></tr>" +
    "<tr><td>Example page</td><td>Ready to inspect</td><td>Demo</td></tr>";
  panel.append(table);
  return "Added a 900px practice table. Reload to remove it.";
})()

Check: At a narrow width, the table extends beyond its panel.

Measure the overflow

Run this read-only check in Console. The table’s bounding box should extend beyond the layout viewport. The document’s scroll width helps confirm that there is page-level overflow.

For a real page, replace #wide-demo with the element you are investigating. Transforms and intentionally off-screen controls can also extend beyond the viewport, so measurements identify candidates rather than a guaranteed cause.

(() => {
  const table = document.querySelector("#wide-demo");
  const box = table?.getBoundingClientRect();
  return {
    viewport: document.documentElement.clientWidth,
    pageWidth: document.documentElement.scrollWidth,
    tableWidth: box?.width,
    tableRight: box?.right
  };
})()

Check: The table measures 900 CSS pixels, wider than a narrow phone viewport.

Try a fix on the element, then check its parent

Choose Elements → Select, tap a table cell, then reopen Codable. In Tree, move up to the table element with id wide-demo. Open Style, change the width value to 100%, and tap Save. Close the popover and inspect the result; run the measurement again.

This small example has short content, so a fluid width is enough. A real data table may need a wrapper with overflow-x: auto to preserve readable columns. A flex or grid child may need min-width: 0. Long unbroken text may need overflow-wrap: anywhere. Test the cause you found instead of hiding overflow on the entire page, which can conceal content and controls.

Check: The sample table fits its panel, and page-level sideways scrolling disappears.

Verify the fix at neighboring sizes

Make the change in your site’s source, then test just below and above the width where it failed. Codable’s Resize tool can open a page and vary W, H, and Scale or use Presets. Width and height are layout points; Scale changes how the viewport fits on your screen. A DPR setting does not mean the layout is that many times wider.

Resize uses its own WKWebView session. Your Safari login and temporary inspector edits do not carry over. For an authenticated Safari-only bug, stay in that Safari session and compare real window sizes or devices. Use Resize with your development page when you can reproduce its state there.