changes: update card & auth

src/components/UpdateCard.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="bg-dimmer" @click="closeCard"></div>
-  <div class="g-card popup-card">
-    <div class="card_content">
+  <div class="g-card">
+    <div class="card_body">
       <h1>Raport zmian</h1>
 
-      <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
-        {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
-      </p>
-    </div>
+      <div class="card_content">
+        <div class="changes-list">
+          <p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
+            {{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
+          </p>
+        </div>
+      </div>
 
-    <div class="card_actions">
-      <button @click="closeCard">OK!</button>
+      <div class="card_actions">
+        <button @click="closeCard">OK!</button>
+      </div>
     </div>
   </div>
 </template>
@@ -55,8 +59,30 @@ export default defineComponent({
   background-color: #0000004f;
 }
 
+.g-card {
+  overflow: auto;
+}
+
+.card_body {
+  display: grid;
+  grid-template-rows: 60px 80%;
+  height: 90vh;
+  max-height: 550px;
+  padding: 0.5em;
+}
+
+.card_content {
+  overflow: auto;
+}
+
+.changes-list {
+  overflow: auto;
+}
+
 h1 {
   text-align: center;
+  margin: 0;
+  padding: 0.5em 0;
 }
 
 .card_actions {