Add unit tests for LoginButton component with comprehensive coverage

frontend/vue-app/src/components/child/ChildEditView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="edit-view">
+  <div class="view">
     <EntityEditForm
       entityLabel="Child"
       :fields="fields"
@@ -133,4 +133,13 @@ function handleCancel() {
   router.back()
 }
 </script>
-<style scoped></style>
+<style scoped>
+.view {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
+</style>

frontend/vue-app/src/components/child/ChildView.vue

@@ -6,7 +6,7 @@ import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
-import '@/assets/view-shared.css'
+//import '@/assets/view-shared.css'
 import '@/assets/styles.css'
 import type {
   Child,
@@ -438,6 +438,35 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    gap: 1rem;
+  }
+  .modal {
+    padding: 1rem;
+    min-width: 0;
+  }
+}
+
 .item-points {
   color: var(--item-points-color, #ffd166);
   font-size: 1rem;

frontend/vue-app/src/components/child/ParentView.vue

@@ -7,7 +7,7 @@ import ScrollingList from '../shared/ScrollingList.vue'
 import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
 import '@/assets/styles.css'
-import '@/assets/view-shared.css'
+//import '@/assets/view-shared.css'
 import type {
   Task,
   Child,
@@ -511,6 +511,34 @@ function goToAssignRewards() {
 </template>
 
 <style scoped>
+.layout {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+/* Responsive Adjustments */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    gap: 1rem;
+  }
+  .modal {
+    padding: 1rem;
+    min-width: 0;
+  }
+}
 .assign-buttons {
   display: flex;
   gap: 1rem;