響應式版面除錯 Responsive Layout Debugging

I can't run your page, so everything below is a hypothesis. Each one comes with a check that will confirm or rule it out. Start at 375px, then test 320, 414, 768, 1024 and 1280, and 200% zoom at desktop width.

First, find the widest element. Run the overflow-finder snippet from the skill in the console at 375px. Skip anything inside the table wrapper. The URL card or the table will probably be at the top of the list.

1. Card with a long URL in a flex row (sideways scroll at 375px)

• Cause: a flex item has an automatic min-width, so it can't shrink below its content. An unbroken URL has no break opportunity, so the card keeps the URL's full width and pushes the row past the viewport.
• Fix:

  .card { min-width: 0; }                 /* let the flex item shrink */
  .card .url { overflow-wrap: anywhere; } /* allow breaks in the URL */
  

  If the row should stack on phones, add flex-wrap: wrap or switch to flex-direction: column below your breakpoint.
• Verify: at 375 and 320, the card's getBoundingClientRect().right should be no more than the viewport width, and the URL should wrap inside the card. Test with the longest real URL you have. Remove min-width: 0 once to confirm the overflow comes back. That proves this was the cause.

2. Table with 8 columns

• Cause: tables don't shrink below their content width, so 8 columns exceed 375px.
• Fix: scroll the table inside its own container, not the page.

  <div class="table-scroll"><table>…</table></div>
  

  .table-scroll { overflow-x: auto; max-width: 100%; }
  

  If the table is read often on phones, restack each row into a card below about 600px. Don't hide columns. If the wrapper sits inside a flex row, it may also need min-width: 0.
• Verify: the page has no horizontal scrollbar at 375, and only the table area scrolls sideways. Check that every column can be reached and that the wrapper can be scrolled with the keyboard. Add tabindex="0" to the wrapper if it can't. At 1280 the table should look unchanged.

3. Hero with height: 100vh too tall on phones

• Cause: 100vh is the largest viewport height, measured with the browser bars retracted. While the address bar is showing, the hero is taller than the visible area.
• Fix:

  .hero {
    min-height: 100vh;   /* fallback */
    min-height: 100svh;  /* or 100dvh if you want it to follow the bars */
  }
  

  Use min-height instead of height so tall content isn't clipped. svh always fits with the bars showing. dvh resizes as the bars move, which can cause jank. Also check for 100vw anywhere on the hero. It can cause sideways overflow of its own.
• Verify: this needs a real phone, because emulation doesn't reproduce the browser bars reliably. Load the page with the address bar visible and confirm the hero fits without cutting off its content. Then scroll and confirm nothing jumps.

4. Sticky sidebar doesn't stick on desktop

• Cause: the parent has overflow-x: hidden. Any overflow value other than visible makes that element the sticky element's scroll container. Because it never scrolls vertically, the sidebar has nothing to stick against. Less likely, but worth checking: the sidebar has no top value, or its parent isn't taller than the sidebar.
• Fix: remove overflow-x: hidden from that parent, or move it somewhere that isn't an ancestor of the sidebar. If it was there to hide the overflow from bug 1 or 2, fixing those removes the need for it. If you must clip, overflow-x: clip doesn't create a scroll container, so sticky keeps working.

  .sidebar { position: sticky; top: 1rem; align-self: flex-start; }
  

  align-self: flex-start matters if the parent is a flex or grid container. A stretched sidebar is as tall as its parent and has no room to stick.
• Verify: at 1280, scroll the page and confirm the sidebar stays pinned. In DevTools, walk up the ancestor chain and check that none has an overflow other than visible. Then check 375 again, since removing the clip could expose any overflow that remains.

Order of work

Fix 1 and 2 first and re-run the finder. Then fix 4, which removes the clip that was hiding the problem. Without both, you'd be hiding the overflow while breaking sticky. Do 3 last, on a real device.

I haven't tested any of this. If you can paste the computed styles for the card, the table wrapper and the sidebar's ancestors (not your code), I can narrow the causes down further.