improvements

resources/js/Components/QuestionCard.vue

@@ -63,7 +63,7 @@ const updateTextValue = (event) => {
 
 <template>
     <div
-        class="py-5 first:pt-0 transition-all duration-200"
+        class="py-6 transition-all duration-200"
         :class="{ 'border-l-2 border-red-400/60 pl-4 -ml-4': error }"
     >
         <p class="text-white font-medium leading-relaxed mb-4">{{ question.text }}</p>

resources/js/Pages/Session/Show.vue

@@ -41,6 +41,7 @@ initializeAnswers()
 
 // Validation state
 const validationErrors = ref({})
+const processing = ref(false)
 const showErrors = ref(false)
 const questionRefs = ref({})
 
@@ -57,6 +58,8 @@ const saveAnswer = (questionId) => {
       preserveScroll: true,
       preserveState: true,
       only: ['answers'],
+      onStart: () => { processing.value = true },
+      onFinish: () => { processing.value = false },
     })
   }, 500)
 }
@@ -160,6 +163,9 @@ const completeSession = async () => {
   router.put(`/sessions/${props.session.id}`, {
     answers: { ...answerData },
     complete: true,
+  }, {
+    onStart: () => { processing.value = true },
+    onFinish: () => { processing.value = false },
   })
 }
 
@@ -254,7 +260,7 @@ const completeSession = async () => {
             </Transition>
 
             <div class="flex justify-end">
-                <AppButton size="lg" @click="completeSession" data-cy="complete-session">
+                <AppButton size="lg" :loading="processing" @click="completeSession" data-cy="complete-session">
                     Complete
                 </AppButton>
             </div>

resources/views/pdf/session-result.blade.php

@@ -96,7 +96,6 @@
 
         .meta-left {
             width: 58%;
-            padding-right: 12pt;
         }
 
         .meta-right {
@@ -109,6 +108,7 @@
             border: 1pt solid #3a404d;
             border-radius: 6pt;
             padding: 16pt 18pt;
+            margin-right: 12pt;
         }
 
         .card-label {
@@ -566,19 +566,17 @@
                         <div class="question-item no-break">
                             <table class="question-item-table">
                                 <tr>
-                                    <td class="question-body">
+                                    <td class="question-body"@if ($pillLabel === null) colspan="2"@endif>
                                         <div class="question-text">{{ $question->text }}</div>
                                         @if (!empty($textValue))
                                             <div class="question-text-value">{{ $textValue }}</div>
                                         @endif
                                     </td>
-                                    <td class="question-answer-cell">
-                                        @if ($pillLabel !== null)
+                                    @if ($pillLabel !== null)
+                                        <td class="question-answer-cell">
                                             <span class="{{ $pillClass }}">{{ $pillLabel }}</span>
-                                        @else
-                                            <span class="answer-missing">Not answered</span>
-                                        @endif
-                                    </td>
+                                        </td>
+                                    @endif
                                 </tr>
                             </table>
                         </div>