Resolve #3477872 "Text component table"

Closes #3477872

Test Steps:

1. You may ned to checkout Bluecheese on the 2.x branch before starting
2. run ddev composer install
3. checkout bluecheese on this branch
4. run composer recreate
5. run composer install-storybook
6. run ddev yarn storybook
7. view the text examples at https://drupalorg.ddev.site:6006/?path=/story/branding-typography-global-text-area-example--global-text-area
8. Compare to the Figma at https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?t=jfZf9nrMUrInBgUY-0
9. It should match except we are using the Noto Sans font and there will not be a purple "drop shadow"
10. The table with the Horizontal Scolling Table header should be scrollable when the viewport is too narrow to fit the table
11. Log in to the ddev Drupal instance
12. Edit the "Mission & Vision" node
13. With the input filter set to "filtered HTML" paste in the following:

<h2>Heading H2</h2>
      <p>Lorem ipsum odor amet, consectetuer <strong> adipiscing elit. Velit massa proin integer; </strong> senectus viverra. Posuere maecenas aliquam nulla ut, egestas ex turpis eleifend. Proin parturient elit iaculis eleifend diam mattis parturient dolor aliquam? Feugiat id vehicula maecenas augue habitant laoreet sodales. Tempor maecenas dignissim lacinia cras est volutpat dignissim. Aliquet convallis nisl faucibus integer facilisis augue tristique luctus nullam. Dictumst habitant viverra nibh, massa feugiat tellus.</p>
      <h3>Heading H3</h3>
      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. <em>Duis cubilia conubia tempor magnis quis conubia etiam magnis.</em> Nunc fringilla mauris a maximus magna imperdiet efficitur; arcu vel. Primis senectus tincidunt rhoncus ullamcorper purus. Rutrum morbi rutrum gravida nisl imperdiet finibus viverra congue. Sollicitudin etiam nascetur luctus placerat magnis augue nulla faucibus tempor. Tortor convallis mauris phasellus ultricies; eget imperdiet aptent maximus. Interdum finibus elit ante blandit suspendisse phasellus natoque. Mollis pellentesque magna tristique hendrerit ridiculus imperdiet auctor. Lorem pellentesque senectus ligula nisl pulvinar elementum habitant hac.</p>
      <blockquote class="quote__blockquote ">
        "Consectetur tincidunt egestas nisl scelerisque phasellus. Molestie feugiat natoque eget; nec cras magnis. Quam tempor sem tristique primis sollicitudin a. Maecenas a orci torquent maecenas dis sodales cursus. Praesent parturient tempus curae taciti pretium tincidunt justo. Ut eleifend penatibus praesent etiam leo."
      </blockquote>
      <p>Dictum mollis ex netus morbi malesuada tristique. <b>Natoque</b> tincidunt vulputate nec nisl viverra vulputate fusce elit? Commodo arcu fermentum nulla; blandit est feugiat. Sapien ridiculus mus vel ridiculus ac commodo. Id commodo metus justo sapien accumsan mattis leo mollis. Semper nascetur habitant vestibulum eget mi sed tincidunt.</p>
      <h4>Heading H4</h4>
      <p>Eget blandit porta sodales dis vivamus purus. Nibh himenaeos <i>fringilla pulvinar urna gravida</i> torquent fringilla. Facilisis nisi pulvinar et urna netus suscipit. Proin id lectus sed netus est. Ipsum ex accumsan volutpat augue nec vivamus malesuada. Est montes curabitur dignissim, fermentum urna elementum. Ligula magnis porttitor blandit blandit ridiculus auctor felis.</p>
      <ol>
        <li>This text is list item</li>
        <li>This is a longer list item by just a little.</li>
        <li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
      </ol>
      <table>
        <thead>
        <tr>
          <th>Feature</th>
          <th>Tollgate</th>
          <th>Wall</th>
          <th>Unexpected longer text header here</th>
          <th>Glass</th>
          <th>Borders</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>Sautéed</td>
          <td>disappearance</td>
          <td>raise</td>
          <td>A long text item here that goes onto a few lines</td>
          <td>quite</td>
          <td>unknown</td>
        </tr>
        <tr>
          <td>Risky</td>
          <td>soul</td>
          <td>sleepies</td>
          <td>going</td>
          <td>a long text item here</td>
          <td>yards</td>
        </tr>
        <tr>
          <td>Throttle</td>
          <td>dragons with longer names that wrap onto a few lines</td>
          <td>gift</td>
          <td>candles</td>
          <td>walls</td>
          <td>lying</td>
        </tr>
        <tr>
          <td>Judged</td>
          <td>flutters</td>
          <td>searing</td>
          <td>respectable</td>
          <td>gladly</td>
          <td>SOme longer text here too just to see how it looks.</td>
        </tr>
        <tr>
          <td>Archers</td>
          <td>unlikely</td>
          <td>uses</td>
          <td>markets</td>
          <td>sworn</td>
          <td>stayed</td>
        </tr>
        <tr>
          <td>Weapon</td>
          <td>pointy-ear</td>
          <td>crownless</td>
          <td>learned</td>
          <td>grief</td>
          <td>avail</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td>felt</td>
          <td>year</td>
          <td>despair</td>
          <td>remarked</td>
          <td>mutton</td>
          <td>80</td>
        </tr>
        </tfoot>
      </table>

      <h5>Heading H5</h5>
      <p>Leo dictumst libero ultricies mus dignissim pellentesque. Nostra montes purus malesuada tempus massa pretium dapibus mus. Augue a adipiscing potenti dictum hendrerit dolor eleifend consequat. Mollis est curabitur dui etiam sodales parturient hac duis. Felis convallis leo mi nisi maecenas. Curabitur nibh suscipit eu lacus porttitor viverra velit tristique. Mi augue porttitor mus eget turpis arcu sed ipsum? Fusce sapien viverra cubilia aliquet scelerisque mi in. Ad fermentum amet cubilia lobortis accumsan. Torquent penatibus pharetra ac praesent penatibus, mollis malesuada gravida.</p>
      <ul>
        <li>This text is list item</li>
        <li>This is a longer list item by just a little.</li>
        <li>This list item is very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</li>
      </ul>
      <h6>Heading H6</h6>
      <p>Dapibus nisi dignissim etiam maecenas; euismod magna libero. Dignissim hendrerit quis hac parturient ridiculus finibus montes sem. Laoreet volutpat blandit commodo blandit morbi sagittis habitasse. Vehicula ultrices justo sit odio nunc faucibus suspendisse. Maecenas accumsan sociosqu orci et augue enim ridiculus etiam. Quam risus fames euismod, natoque semper bibendum nibh pellentesque!</p>
      <h3>Horizontal Scrolling Table</h3>

        <table>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
            <th>Points</th>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Adam</td>
            <td>Johnson</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
            <td>67</td>
          </tr>
        </table>

The tables should match what was in Storybook. Note that JS is automatically wrapping it in a div with the "table--scrollable".

To be further determined:

• Should we use some JS to automatically make all tables horizontally scrollable as a basic way of making tables responsive?
• There was existing responsive table javascript and CSS that was making tables stack at mobile it loaded at a mobile size. I did not even notice it right away because they are not triggered if you start at desktop and go down to mobile. I have so far deleted this scss since we talked aobut using horizontal scrolling instead. Do we want to keep this? I am guessing that eventually some responsive tables that stack at mobile could be wanted.