Merge pull request #157 from appwrite/new-drop-state

Add wide drop in mobile removable max width in mobile
appwrite · Mar 6, 2024 · b320ca3 · b320ca3
2 parents 78e37de + 98aadac
commit b320ca3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/famous-parrots-greet.md b/.changeset/famous-parrots-greet.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": minor
+"@appwrite.io/pink": minor
+---
+
+Add utility class to remove max width
diff --git a/apps/pink/src/pages/elements/input-field.mdx b/apps/pink/src/pages/elements/input-field.mdx
@@ -266,7 +266,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
                         </div>
                     </button>
 
-                    <div class="drop is-block-end is-no-arrow">
+                    <div class="drop is-block-end is-no-arrow u-max-width-none">
                         <section class="drop-section">
                             <ul class="drop-list">
                                 <li class="drop-list-item">
@@ -316,7 +316,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
 
                     </div>
 
-                    <div class="drop is-block-end is-no-arrow">
+                    <div class="drop is-block-end is-no-arrow u-max-width-none">
                         <section class="drop-section">
                             <ul class="drop-list">
                                 <li class="drop-list-item">
@@ -361,7 +361,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
 
                     </div>
 
-                    <div class="drop is-block-end is-no-arrow">
+                    <div class="drop is-block-end is-no-arrow u-max-width-none">
                         <section class="drop-section">
                             <ul class="drop-list">
                                 <li class="drop-list-item">
@@ -410,7 +410,7 @@ Dropdown is made with ```drop-list```. To hide items use the ```u-hide``` class.
                         </div>
                     </div>
 
-                    <div class="drop is-block-end is-no-arrow">
+                    <div class="drop is-block-end is-no-arrow u-max-width-none">
                         <section class="drop-section">
 
                             <div class="u-flex u-flex-vertical u-cross-center">

diff --git a/packages/ui/src/_9-utilities.scss b/packages/ui/src/_9-utilities.scss
@@ -205,6 +205,7 @@
 .u-max-width-650    { max-inline-size:pxToRem(650)!important; }
 .u-max-width-700    { max-inline-size:pxToRem(700)!important; }
 .u-max-width-100-percent { max-inline-size:100%!important; }
+.u-max-width-none   {     max-inline-size:none!important; }
 
 .u-height-100-percent { block-size:100%!important; }
 .u-height-800         { block-size:pxToRem(800)!important; }