diff --git a/.changeset/famous-parrots-greet.md b/.changeset/famous-parrots-greet.md
new file mode 100644
index 0000000000..3d0f96b882
--- /dev/null
+++ 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
index b2656ddb44..742b538992 100644
--- 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
index 07c9e69191..6509163834 100644
--- 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; }