fix(docs): fixed horizontal scroll issues in docs (#2433)

eBay · Sep 4, 2024 · 644822f · 644822f
1 parent 32056e3
commit 644822f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/src/modules/calendar.marko b/src/modules/calendar.marko
@@ -839,7 +839,7 @@
     <p>Multiple instances of <span class="highlight">calendar__month</span> can be rendered inside of the <span class="highlight">calendar__body</span>.</p>
 
     <div class="demo">
-        <div class="demo__inner">
+        <div class="demo__inner" style="overflow-x: auto;">
             <div class="calendar">
                 <div class="calendar__header">
                     <div class="calendar__header--inner">

diff --git a/src/modules/toggle-button-group.marko b/src/modules/toggle-button-group.marko
@@ -706,7 +706,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-c1">Select Sizes</h5>
-<div style="width: 500px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group">
         <ul aria-labelledby="toggle-button-group-c1">
             <li>
@@ -986,7 +986,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-c">Select Sizes</h5>
-<div style="width: 500px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group" data-columns-xs="2" data-columns-sm="3" data-columns-md="6" data-columns-xl="8">
         <ul aria-labelledby="toggle-button-group-c">
             <li>
@@ -1104,7 +1104,7 @@
             <h5 id="toggle-button-group-e">
                 Select Sizes
             </h5>
-            <div style="width: 500px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group">
                     <ul aria-labelledby="toggle-button-group-e">
                         <li>
@@ -1234,7 +1234,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-e">Select Sizes</h5>
-<div style="width: 500px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group">
         <ul aria-labelledby="toggle-button-group-e">
             <li>
@@ -1326,7 +1326,7 @@
             <h5 id="toggle-button-group-f">
                 Text Options
             </h5>
-            <div style="width: 750px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--list-layout">
                     <ul aria-labelledby="toggle-button-group-f">
                         <li>
@@ -1378,7 +1378,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-f">Text Options</h5>
-<div style="width: 750px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div aria-labelledby="toggle-button-group-f" class="toggle-button-group toggle-button-group--list-layout">
         <ul aria-labelledby="toggle-button-group-f">
             <li>
@@ -1416,7 +1416,7 @@
             <h5 id="toggle-button-group-g">
                 Text Options
             </h5>
-            <div style="width: 750px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--list-layout">
                     <ul aria-labelledby="toggle-button-group-g">
                         <li>
@@ -1477,7 +1477,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-g">Text Options</h5>
-<div style="width: 750px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">
         <ul aria-labelledby="toggle-button-group-g">
             <li>
@@ -1516,7 +1516,7 @@
             <h5 id="toggle-button-group-h">
                 Select Payment Option
             </h5>
-            <div style="width: 800px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--list-layout">
                     <ul aria-labelledby="toggle-button-group-h">
                         <li>
@@ -1616,7 +1616,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-h">Select Payment Option</h5>
-<div style="width: 800px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">
         <ul aria-labelledby="toggle-button-group-h">
             <li>
@@ -1684,7 +1684,7 @@
     <h5 id="toggle-button-group-i">
         Select Payment Option
     </h5>
-    <div style="width: 800px; border: 1px dashed orange;">
+    <div style="border: 1px dashed orange;">
         <div class="toggle-button-group toggle-button-group--list-layout">
             <ul aria-labelledby="toggle-button-group-i">
                 <li>
@@ -1769,7 +1769,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-i">Select Payment Option</h5>
-<div style="width: 800px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">
         <ul aria-labelledby="toggle-button-group-i">
             <li>
@@ -1823,7 +1823,7 @@
     <h5 id="toggle-button-group-j">
         Select Payment Option
     </h5>
-    <div style="width: 800px; border: 1px dashed orange;">
+    <div style="border: 1px dashed orange;">
         <div class="toggle-button-group toggle-button-group--list-layout">
             <ul aria-labelledby="toggle-button-group-j">
                 <li>
@@ -1884,7 +1884,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-j">Select Payment Option</h5>
-<div style="width: 800px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--list-layout">
         <ul aria-labelledby="toggle-button-group-j">
             <li>
@@ -1942,7 +1942,7 @@
             <h5 id="toggle-button-group-k">
                 Selection Options
             </h5>
-            <div style="width: 600px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--gallery-layout">
                     <ul aria-labelledby="toggle-button-group-k">
                         <li>
@@ -2027,7 +2027,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-k">Selection Options</h5>
-<div style="width: 600px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--gallery-layout">
         <ul aria-labelledby="toggle-button-group-k">
             <li>
@@ -2111,7 +2111,7 @@
             <h5 id="toggle-button-group-l">
                 Selection Options
             </h5>
-            <div style="width: 700px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--gallery-layout">
                     <ul aria-labelledby="toggle-button-group-l">
                         <li>
@@ -2190,7 +2190,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-l">Selection Options</h5>
-<div style="width: 700px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--gallery-layout">
         <ul aria-labelledby="toggle-button-group-l">
             <li>
@@ -2252,7 +2252,7 @@
             <h5 id="toggle-button-group-m">
                 Selection Options
             </h5>
-            <div style="width: 750px; border: 1px dashed orange;">
+            <div style="border: 1px dashed orange;">
                 <div class="toggle-button-group toggle-button-group--gallery-layout">
                     <ul aria-labelledby="toggle-button-group-m">
                         <li>
@@ -2352,7 +2352,7 @@
         type="html"
         >
 <h5 id="toggle-button-group-m">Selection Options</h5>
-<div style="width: 750px; border: 1px dashed orange;">
+<div style="border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--gallery-layout">
         <ul aria-labelledby="toggle-button-group-m">
             <li>