Making styling consistent and readable on mobile

pages/admin.vue

@@ -1,19 +1,21 @@
-<!-- pages/admin.vue -->
 <template>
-  <UContainer class="admin-container">
-    <h1 class="page-title">Admin Dashboard</h1>
-    <UCard v-if="loading" class="loading-card">Loading...</UCard>
-    <UCard v-else-if="error" class="error-card">{{ error }}</UCard>
-    <UCard v-else class="users-table">
-      <UTable :rows="rows" :columns="columns">
-        <template #actions-data="{ row }">
-          <UDropdown :items="actions(row)">
-            <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
-          </UDropdown>
-        </template>
-      </UTable>
-    </UCard>
-  </UContainer>
+  <div class="admin-container">
+    <h2 class="page-title">Admin Dashboard</h2>
+
+    <div v-if="loading" class="loading">Loading...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else class="users-table">
+      <div class="table-responsive">
+        <UTable :rows="rows" :columns="columns">
+          <template #actions-data="{ row }">
+            <UDropdown :items="actions(row)">
+              <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+            </UDropdown>
+          </template>
+        </UTable>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -161,9 +163,9 @@ async function updateAdmin(userId, updates) {
 
 <style scoped>
 .admin-container {
+  width: 100%;
   max-width: 1000px;
   margin: 0 auto;
-  padding: 20px;
 }
 
 .page-title {
@@ -173,22 +175,47 @@ async function updateAdmin(userId, updates) {
   text-align: center;
 }
 
-UTable {
+.loading,
+.error,
+.users-table {
+  margin-bottom: 20px;
+}
+
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+:deep(.u-table) {
   width: 100%;
+  min-width: 600px;
   border-collapse: collapse;
 }
 
-th, td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
+:deep(.u-table th),
+:deep(.u-table td) {
+  padding: 10px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
 }
 
-th {
+:deep(.u-table th) {
   background-color: #f2f2f2;
+  font-weight: bold;
+}
+
+:deep(.u-dropdown) {
+  min-width: auto;
 }
 
-UButton {
-  margin-right: 5px;
+@media (max-width: 768px) {
+  :deep(.u-table) {
+    font-size: 14px;
+  }
+
+  :deep(.u-table th),
+  :deep(.u-table td) {
+    padding: 8px;
+  }
 }
-</style>
+</style>

pages/components/ExpenseForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <UCard class="expense-form-card">
+  <div class="expense-form-container">
     <UForm @submit.prevent="handleSubmit" class="expense-form">
       <UFormGroup label="Date" name="date">
         <UInput type="date" id="date" v-model="expenseData.date" required />
@@ -21,7 +21,7 @@
         <UButton type="button" color="gray" @click="cancelEdit">Cancel</UButton>
       </div>
     </UForm>
-  </UCard>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -88,20 +88,16 @@ function cancelEdit() {
 </script>
 
 <style scoped>
-.expense-form-card {
-  max-width: 500px;
+.expense-form-container {
+  width: 100%;
+  max-width: 600px;
   margin: 0 auto;
-  background-color: var(--color-background-card);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: 8px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 }
 
 .expense-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 20px;
 }
 
 :deep(.form-group) {

pages/expense-form.vue

@@ -1,8 +1,13 @@
 <template>
-  <UContainer>
-    <h1>Expense Tracker</h1>
-    <ExpenseForm :expense="newExpense" :categories="categories" submitButtonText="Add Expense" @submit="addExpense" />
-  </UContainer>
+  <div class="expense-form-container">
+    <h3 class="page-title">Add New Record</h3>
+    <ExpenseForm 
+      :expense="newExpense" 
+      :categories="categories" 
+      submitButtonText="Submit" 
+      @submit="addExpense" 
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +24,10 @@ const newExpense = ref<Expense>({
 
 const categories = ref<string[]>([]);
 
+onMounted(async () => {
+  await fetchCategories();
+});
+
 async function addExpense(expense: Expense) {
   try {
     const response = await fetch('/api/expenses/add', {
@@ -43,8 +52,99 @@ async function addExpense(expense: Expense) {
       category: ''
     };
 
+    // Show success message
+    alert('Expense added successfully!');
+
   } catch (error) {
     alert('Failed to add expense. Please try again.');
   }
 }
+
+async function fetchCategories() {
+  try {
+    const response = await fetch('/api/categories');
+    if (response.ok) {
+      const json = await response.json();
+      categories.value = json.map((category: { id: number, name: string }) => category.name);
+    } else {
+      console.error('Failed to fetch categories');
+    }
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+}
 </script>
+
+<style scoped>
+.expense-form-container {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+:deep(.form-group) {
+  margin-bottom: 20px;
+}
+
+:deep(label) {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+:deep(input),
+:deep(select),
+:deep(textarea) {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 4px;
+}
+
+:deep(button[type="submit"]) {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+:deep(button[type="submit"]:hover) {
+  background-color: #0056b3;
+}
+
+:root {
+  --color-border-subtle: #e2e8f0;
+}
+
+:root.dark {
+  --color-border-subtle: #2d3748;
+}
+
+@media (max-width: 1024px) {
+  .expense-form-container {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 768px) {
+  .expense-form-container {
+    padding: 5px;
+  }
+}
+
+@media (max-width: 640px) {
+  .expense-form-container {
+    padding: 2px;
+  }
+}
+</style>