Merge pull request #3 from ita-design-system/1-unwanted-overflow-on-large-screens-when-css-value-length-is-high

1 unwanted overflow on large screens when css value length is high

Author: olivier3lanc

docs/assets/js/bricss.js

@@ -547,7 +547,7 @@ const bricss = {
         },
         docPropertyItem: function({property, content, responsiveContent, utilityContent}) {
             return `
-                <li class="dsg__doc__property_item | fg-1 | p-6 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2"
+                <li class="dsg__doc__property_item | fg-1 | p-6 maxw-100 | bwidth-1 bstyle-solid bcolor-primary-500 bc-primary-600 brad-2"
                     w-100="xs,sm"
                     data-property="${property}">
                     <div class="d-flex fd-column gap-6">

index.html

@@ -63,7 +63,6 @@
         <button type="button"
             class="d-flex | pl-5 pr-5 pt-4 pb-4 fs-1 | bc-primary-700 b-0"
             c-toggle="menu"
-            data-dismiss="true"
             title="Toggle menu"
             style="perspective: 5em; transform-style: preserve-3d;">
             <span class="d-flex fd-column gap-1 __animation_3"
@@ -134,14 +133,18 @@ <h1 class="d-flex | m-0" d-none="xs,sm">
             </form>
             <a  href="./docs/"
                 title="Get help"
-                class="d-flex ai-center gap-1 | fs-2 td-none ff-lead-700 tt-uppercase ws-nowrap | c-primary-100">
+                class="d-flex ai-center gap-1 | fs-2 td-none ff-lead-700 tt-uppercase ws-nowrap | c-primary-100"
+                pt-3="xs,sm"
+                pb-3="xs,sm">
                 How it works<span class="ff-lead-400 c-secondary-500">?</span>          
             </a>
             <!-- Enter Github link or comment/ remove -->
             <a  href="./#your-own-github-link"
                 target="_blank"
                 title="Open Project Name Github on a new tab"
-                class="d-flex ai-center | fs-2 td-none ff-lead-700 tt-uppercase c-primary-100">
+                class="d-flex ai-center | fs-2 td-none ff-lead-700 tt-uppercase c-primary-100"
+                pt-3="xs,sm"
+                pb-3="xs,sm">
                 Github
                 <svg style="height: 1em;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" stroke="var(--dsg-colors-secondary-500)">
                     <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>