Skip to content

Web: markdown tables are clipped with no horizontal scroll #138

@artman-shane

Description

@artman-shane

Description

On the web (desktop browser), markdown tables that exceed the viewport width are clipped on the right side with no way to scroll horizontally or copy the content. Users cannot see truncated columns at all.

Root Cause

Two issues in MarkdownView.tsx:

1. overflow: 'hidden' on tableContainer (line ~545)

tableContainer: {
    overflow: 'hidden',  // clips the ScrollView content
    borderRadius: 8,
    ...
}

The overflow: 'hidden' is needed for borderRadius to render correctly, but it clips the inner ScrollView's scrollbar and prevents any visible scroll affordance on web.

2. Scroll indicator hidden on web (line ~262)

<ScrollView
    horizontal
    showsHorizontalScrollIndicator={false}  // no visual cue on web
    ...
>

On native, the RNGH ScrollView with disallowInterruption was added (commit 6bf830ff) to fix Android gesture issues. But the web path still uses RN's built-in ScrollView with the indicator explicitly hidden. Desktop users have no affordance that the table is scrollable — no scrollbar, no fade, no arrow.

Steps to Reproduce

  1. Open Happier in a desktop web browser
  2. Have an agent produce a response with a wide markdown table (3+ columns with long text)
  3. Observe the right columns are cut off with no scroll indicator

Expected Behavior

  • Table should be horizontally scrollable with a visible scrollbar on web
  • All column content should be accessible

Suggested Fix

For the web path specifically:

  1. Set showsHorizontalScrollIndicator={true} on web
  2. Either restructure the container so borderRadius is applied to an inner wrapper that doesn't clip the scrollbar, or use overflow-x: auto on the scroll container directly
  3. Consider using a native HTML <div style="overflow-x: auto"> on web instead of RN's ScrollView for more natural desktop scroll behavior

Related Issues

Screenshot

Table clipped on web

Right columns ("Reliability") truncated with no way to scroll or view full content.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions