From c2be3c44cbf0bc2ec1a3079dfbeaed3b16e413c7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 1 Jul 2022 17:35:02 +0200
Subject: [PATCH] fix: layout of user limit in security

---
 .../console/[project]/users/security.svelte   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index 6884f6146..7bb629220 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -77,8 +77,8 @@
         </p>
 
         <svelte:fragment slot="aside">
-            <ul class="u-flex u-gap-12">
-                <li>
+            <ul class="form-list">
+                <li class="form-item">
                     <div class="input-text-wrapper">
                         <input
                             id="unlimited"
@@ -91,6 +91,8 @@
                         <label class="label" for="unlimited"
                             >Unlimited <Pill>recommended</Pill></label>
                     </div>
+                </li>
+                <li class="form-item is-multiple">
                     <div class="input-text-wrapper">
                         <input
                             id="limited"
@@ -102,11 +104,17 @@
                             value="limited" />
                         <label class="label" for="limited">Limited</label>
                     </div>
-                    <InputNumber
-                        id="limit"
-                        label=""
-                        disabled={isLimited === 'unlimited'}
-                        bind:value={newLimit} />
+                    <div
+                        class="input-text-wrapper u-stretch"
+                        on:click={() => (isLimited = 'limited')}>
+                        <input
+                            type="number"
+                            name="limit"
+                            id="limit"
+                            class="input-text"
+                            disabled={isLimited === 'unlimited'}
+                            bind:value={newLimit} />
+                    </div>
                 </li>
             </ul>
         </svelte:fragment>