Bug report: horizontal scrolling issue for wide tables

[marquesine]

Description

When displaying a DataFrame with many columns in Briefer, horizontal scrolling doesn’t work, causing columns to get cut off and making the full DataFrame unreadable. This issue occurs both in editing mode and publishing mode and affects Safari and Chrome browsers.

Steps to reproduce

1. Self-host Briefer and access it via Safari or Chrome.
2. Add a DataFrame with a large number of columns (e.g., 10+ columns).
3. Try to scroll horizontally in the DataFrame view in both editing and publishing modes.
4. Observe that horizontal scrolling is not functioning, and the first columns are not visible.

Expected behavior

The DataFrame should allow horizontal scrolling to view all columns, both in editing and publishing modes.

Actual behavior

There is no horizontal scroll bar, and users cannot scroll to see columns beyond a certain width, as demonstrated in the screenshot below.

Screenshot

[marquesine]

This issue may be specific to macOS, as I haven't tested it on other operating systems.

I noticed that when I disabled the items-end class in the browser's rendered HTML, the overflow behavior started functioning as expected. Here's the relevant section of the HTML:

<div class="overflow-x-auto ph-no-capture px-4 pt-5 pb-2">
  <div>
    <div class="flex flex-col items-end bg-white overflow-x-scroll"> <!-- This line -->
      <div class="python-html-output printable-block">
        <table class="dataframe" border="1">
          <!-- Wide table (10 or more columns) -->
        </table>
        196,923 rows × 23 columns
</div></div></div></div>

I’m hesitant to suggest removing the items-end class through a pull request, as it seems like a deliberate design choice for the project’s layout and style. However, I’m curious: is this inability to view the entire wide table an intentional design decision? Being able to see the full width of the table is critical, especially during the EDA phase.

Here’s a grep result that shows the usage of the items-end class throughout the project:

$ grep -r "items-end" apps/web/src/
apps/web/src//components/SubscriptionBadge.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/ShortcutsModal.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/Files.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/DataSourcesInfo.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/MobileWarning.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/DataSourcesList.tsx:            <div className="hidden sm:flex sm:flex-col sm:items-end">
apps/web/src//components/v2Editor/customBlocks/visualization/YAxisPicker.tsx:      <div className="flex justify-between items-end pb-1">
apps/web/src//components/v2Editor/customBlocks/visualization/YAxisPicker.tsx:              <div className="flex space-x-1 items-end relative group">
apps/web/src//components/v2Editor/customBlocks/python/PythonOutput.tsx:            <div className={clsx(!props.isDashboardView ? 'flex flex-col items-end' : '')}>
apps/web/src//components/v2Editor/customBlocks/pivotTable/PivotTableGroup.tsx:      <div className="flex justify-between items-end pb-1">
apps/web/src//components/v2Editor/customBlocks/pivotTable/PivotTableGroup.tsx:            <div className="flex flex-col space-x-1 items-end relative group">
apps/web/src//components/v2Editor/RemoveTabDashboardConflictDialog.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/v2Editor/RemoveBlockDashboardConflictDialog.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//components/onboarding/index.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//pages/workspaces/[workspaceId]/integrations/new/index.tsx:              <div className="hidden sm:flex sm:flex-col sm:items-end"></div>
apps/web/src//pages/workspaces/[workspaceId]/profile.tsx:        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
apps/web/src//pages/workspaces/[workspaceId]/profile.tsx:        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
apps/web/src//pages/workspaces/[workspaceId]/users/new.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
apps/web/src//pages/workspaces/[workspaceId]/data-sources/index.tsx:          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">

[lucasfcosta]

Hey @marquesine! Not being able to see the whole table is definitely not intentional - I'd love to fix that!

It's also interesting that you're seeing these scrollbars on Mac's browsers - they don't show up for me on Mac, which is weird. I think this might end up being solved by #72 btw.

Let me tag @vieiralucas in here to see if he's got any input on next steps here.

@vieiralucas do you want to recommend @marquesine to go for a fix here or should we wait for the fix for #72 before that?

[vtfg]

@marquesine I think my recently merged PR (#82) fixed this, I accidentally caused this issue while adding another feature.

Can you please pull from main and test again?

[marquesine]

@vtfg It works perfectly now. Thanks!

[vtfg]

@marquesine Great! Sorry about that, let us know if you find another issue.