improve responsive

nuxt-ui-pro · Feb 19, 2025 · b56d85c · b56d85c
1 parent ee7313a
commit b56d85c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/app/components/settings/MembersList.vue b/app/components/settings/MembersList.vue
@@ -29,10 +29,10 @@ const items = [{
         />
 
         <div class="text-sm min-w-0">
-          <p class="text-gray-900 dark:text-white font-medium truncate">
+          <p class="text-(--ui-text-highlighted) font-medium truncate">
             {{ member.name }}
           </p>
-          <p class="text-gray-500 dark:text-gray-400 truncate">
+          <p class="text-(--ui-text-muted) truncate">
             {{ member.username }}
           </p>
         </div>

diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
@@ -56,7 +56,7 @@ function onFileClick() {
       </div>
     </UPageCard>
     <UPageCard>
-      <div class="flex justify-between items-center">
+      <div class="flex justify-between items-center gap-4">
         <UFormField label="Profile" description="This information will be displayed publicly so be careful what you share." />
         <UButton
           form="settings"
@@ -78,7 +78,7 @@ function onFileClick() {
           label="Name"
           description="Will appear on receipts, invoices, and other communication."
           required
-          class="flex justify-between items-start gap-4"
+          class="flex max-sm:flex-col justify-between items-start gap-4"
         >
           <UInput
             v-model="profile.name"
@@ -91,7 +91,7 @@ function onFileClick() {
           label="Email"
           description="Used to sign in, for email receipts and product updates."
           required
-          class="flex justify-between items-start gap-4"
+          class="flex max-sm:flex-col justify-between items-start gap-4"
         >
           <UInput
             v-model="profile.email"
@@ -105,7 +105,7 @@ function onFileClick() {
           label="Username"
           description="Your unique username for logging in and your profile URL."
           required
-          class="flex justify-between items-start gap-4"
+          class="flex max-sm:flex-col justify-between items-start gap-4"
         >
           <UInput
             v-model="profile.username"
@@ -118,7 +118,7 @@ function onFileClick() {
           name="avatar"
           label="Avatar"
           description="JPG, GIF or PNG. 1MB Max."
-          class="flex justify-between items-center gap-4"
+          class="flex max-sm:flex-col justify-between sm:items-center gap-4"
         >
           <div class="flex flex-wrap items-center gap-3">
             <UAvatar
@@ -145,7 +145,7 @@ function onFileClick() {
           name="bio"
           label="Bio"
           description="Brief description for your profile. URLs are hyperlinked."
-          class="flex justify-between items-start gap-4"
+          class="flex max-sm:flex-col justify-between items-start gap-4"
           :ui="{ container: 'w-full' }"
         >
           <UTextarea

diff --git a/app/pages/settings/members.vue b/app/pages/settings/members.vue
@@ -14,7 +14,7 @@ const filteredMembers = computed(() => {
 </script>
 
 <template>
-  <div class="flex gap-4 max-sm:flex-col items-start gap-4 justify-between">
+  <div class="flex max-sm:flex-col items-start gap-4 justify-between">
     <div class="sm:sticky sm:top-0 flex sm:flex-col max-sm:items-center gap-4 max-sm:w-full justify-between">
       <div class="flex flex-col gap-1">
         <span class="text-lg font-semibold">Manage access</span>
@@ -28,7 +28,7 @@ const filteredMembers = computed(() => {
         />
       </div>
     </div>
-    <UPageCard class="w-full">
+    <UPageCard class="w-full" :ui="{ container: 'p-0 sm:p-0', header: 'p-4 mb-0' }">
       <template #header>
         <UInput
           v-model="q"