Updated styles a bit.

litelist-app/src/assets/base.css

@@ -2,3 +2,7 @@ body {
     font-family: sans-serif;
     margin: 0;
 }
+
+button {
+    font-size: medium;
+}

litelist-app/src/components/LogOutButton.vue

@@ -9,19 +9,12 @@ async function doLogOut() {
 </script>
 
 <template>
-  <div class="button-container">
   <button @click="doLogOut()">
     Log Out
   </button>
-  </div>
 </template>
 
 <style scoped>
-.button-container {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 button {
   font-size: medium;
 }

litelist-app/src/components/PageContainer.vue

@@ -0,0 +1,20 @@
+<!--
+This is a generic container to wrap around a page's content to keep it within
+a mobile-friendly width.
+-->
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page-container">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  max-width: 50ch;
+  margin: 0 auto;
+  padding: 0.5rem;
+}
+</style>

litelist-app/src/views/ListsView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import {useAuthStore} from "@/stores/auth";
 import {nextTick, onMounted, ref, type Ref} from "vue";
-import type {NoteList} from "@/api/lists";
+import type {Note, NoteList} from "@/api/lists";
 import {createNoteList, getNoteLists} from "@/api/lists";
 import {useRouter} from "vue-router";
 import {stringToColor} from "@/util";
 import LogOutButton from "@/components/LogOutButton.vue";
+import PageContainer from "@/components/PageContainer.vue";
 
 const authStore = useAuthStore()
 const router = useRouter()
@@ -46,10 +47,19 @@ async function createList() {
       newListModel.value.description
   )
   noteLists.value = await getNoteLists(authStore.token)
+  creatingNewList.value = false
+}
+
+function getListItemStyle(list: NoteList) {
+  return {
+    "background-color": stringToColor(list.name, 100, 92),
+    "border-color": stringToColor(list.name, 100, 50)
+  }
 }
 </script>
 
 <template>
+  <PageContainer>
     <header>
       <h1>Lists</h1>
       <div>
@@ -59,7 +69,7 @@ async function createList() {
       </div>
     </header>
 
-  <form v-if="creatingNewList" class="new-list-form" @submit.prevent="createList()">
+    <form v-if="creatingNewList" @submit.prevent="createList()">
       <div class="form-row">
         <label for="list-name">Name</label>
         <input type="text" id="list-name" required minlength="3" v-model="newListModel.name"/>
@@ -78,7 +88,7 @@ async function createList() {
         v-for="list in noteLists"
         :key="list.id"
         @click="goToList(list.id)"
-      :style="{'background-color': stringToColor(list.name, 100, 90)}"
+        :style="getListItemStyle(list)"
     >
       <h3 v-text="list.name"></h3>
       <p v-text="list.description"></p>
@@ -87,24 +97,21 @@ async function createList() {
     <div>
       <LogOutButton/>
     </div>
+  </PageContainer>
 </template>
 
 <style scoped>
 h1 {
   text-align: center;
 }
-header {
-  max-width: 50ch;
-  margin: 0 auto;
-}
 
 .note-list-item {
   display: block;
-  max-width: 50ch;
+  margin: 1rem 0;
-  margin: 1rem auto;
+  padding: 0.5rem;
-  padding: 1rem;
   border-radius: 1rem;
-  border: 2px solid black;
+  border-style: solid;
+  border-width: 3px;
   position: relative;
 }
 
@@ -122,16 +129,23 @@ header {
   font-size: small;
 }
 
-.new-list-form {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 .form-row {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
 }
 
 .form-row label {
   display: block;
 }
+
+.form-row input {
+  font-size: medium;
+  padding: 0.25rem;
+  box-sizing: border-box;
+}
+
+@media (max-width: 480px) {
+  .form-row input {
+    width: 100%;
+  }
+}
 </style>

litelist-app/src/views/LoginView.vue

@@ -3,6 +3,7 @@ import {ref} from "vue";
 import {login, type LoginError} from "@/api/auth";
 import {useAuthStore} from "@/stores/auth";
 import {useRouter} from "vue-router";
+import PageContainer from "@/components/PageContainer.vue";
 
 const loginModel = ref({
   username: "",
@@ -28,6 +29,7 @@ async function doLogin() {
 </script>
 
 <template>
+  <PageContainer>
     <h1>LiteList</h1>
     <form @submit.prevent="doLogin" @reset="resetLogin">
       <div class="form-row">
@@ -56,6 +58,7 @@ async function doLogin() {
         <button type="submit">Login</button>
       </div>
     </form>
+  </PageContainer>
 </template>
 
 <style scoped>
@@ -81,13 +84,16 @@ form {
 }
 
 .form-row input {
-  width: 75%;
+  width: 30ch;
-  padding: 0.5rem;
+  padding: 0.25rem;
   font-size: large;
+  box-sizing: border-box;
 }
 
-.form-row button {
+@media (max-width: 480px) {
-  font-size: medium;
+  .form-row input {
+    width: 100%;
+  }
 }
 
 </style>

litelist-app/src/views/SingleListView.vue

@@ -4,6 +4,8 @@ import {nextTick, onMounted, ref, type Ref} from "vue";
 import {useAuthStore} from "@/stores/auth";
 import {createNote, deleteNote, deleteNoteList, getNoteList} from "@/api/lists";
 import {useRoute, useRouter} from "vue-router";
+import PageContainer from "@/components/PageContainer.vue";
+import LogOutButton from "@/components/LogOutButton.vue";
 
 const authStore = useAuthStore()
 const route = useRoute()
@@ -72,7 +74,7 @@ async function createNoteAndRefresh() {
 </script>
 
 <template>
-  <div v-if="list">
+  <PageContainer v-if="list">
     <header>
       <h1 v-text="list.name"></h1>
       <p><em v-text="list.description"></em></p>
@@ -81,10 +83,11 @@ async function createNoteAndRefresh() {
         <button @click="deleteList(list.id)">
           Delete this List
         </button>
+        <button @click="router.push('/lists')">All Lists</button>
       </div>
     </header>
 
-    <form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()" class="new-note-form">
+    <form v-if="creatingNote" @submit.prevent="createNoteAndRefresh()">
       <div class="form-row">
         <label for="note-content">Text</label>
         <input type="text" id="note-content" required minlength="1" v-model="newNoteText"/>
@@ -104,7 +107,8 @@ async function createNoteAndRefresh() {
           @click="deleteNoteAndRefresh(note.id)"
       />
     </div>
-  </div>
+
+    <LogOutButton/>
 
     <dialog id="list-delete-dialog">
       <form method="dialog">
@@ -117,6 +121,7 @@ async function createNoteAndRefresh() {
         </div>
       </form>
     </dialog>
+  </PageContainer>
 </template>
 
 <style scoped>
@@ -124,41 +129,37 @@ h1 {
   text-align: center;
 }
 
-header {
-  max-width: 50ch;
-  margin: 0 auto;
-}
-
 .buttons-list button {
   margin-right: 1rem;
   font-size: medium;
 }
 
 .note-item {
-  max-width: 50ch;
+  margin: 1rem 0;
-  margin: 1rem auto;
-  border-bottom: 1px solid black;
   position: relative;
+  background-color: #fff2bd;
+  color: #212121;
+  font-size: large;
+  padding: 0.5rem;
+  min-height: 40px;
+  box-shadow: 2px 2px 4px 1px black;
 }
 
 .note-item-text {
   width: 90%;
+  margin: 0;
 }
 
 .trash-button {
-  width: 32px;
+  width: 24px;
   position: absolute;
-  top: 0;
+  top: 5px;
-  right: 0;
+  right: 5px;
 }
 
 .trash-button:hover {
-  cursor: pointer
+  cursor: pointer;
-}
+  background-color: lightgray;
-
-.new-note-form {
-  max-width: 50ch;
-  margin: 0 auto;
 }
 
 .form-row {
@@ -168,4 +169,16 @@ header {
 .form-row label {
   display: block;
 }
+
+.form-row input {
+  font-size: medium;
+  padding: 0.25rem;
+  box-sizing: border-box;
+}
+
+@media(max-width: 480px) {
+  .form-row input {
+    width: 100%;
+  }
+}
 </style>