Brenosalv/bug/mobile-table---not-responsive

[Brenosalv]

316

Changes

• Add horizontal scroll to table for small screen widths

Tests / Screenshots

• iPhone 6/7/8:

[Brenosalv]

@travjenkins Please let me know your thoughts about this solution. The real change is:

Before:

.dynamic-html {
      width: 100%;
      overflow: hidden;
}

After:

.dynamic-html {
      width: 100%;
      overflow: hidden;

      .table {
        overflow-x: auto;

        @media (max-width: 620px) {
          float: none !important;
        }

        &>table {
          width: 100%;
          min-width: 400px;
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    }

This way the tables are scrolling in small screen widths.

The float: none; is necessary for tables that are floatting left or right in parallel with a text (see E.g 2). It's not a problem since it's applied only for screen widths less than 620px where it makes sense to centralize any table.

Examples of blog posts for testing:

• E.g 1: https://estuary.dev/data-mesh-vs-data-fabric/
• E.g 2: https://estuary.dev/the-complete-introduction-to-change-data-capture-cdc/

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit 14fe53c):

https://estuary-marketing--pr346-brenosalv-bug-mobile-xws5p996.web.app

_{(expires Sun, 07 Jul 2024 17:24:47 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 76f6b095a0752e5d9c6c890267f9fdc3e392161e}

[travjenkins]

Can we remove the extra space around the table on mobile to make it a bit extra readable?