From 2bf749c4f1cfda03eee3b5d9e65d30b0e160819d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 28 Jan 2021 16:48:33 +0200
Subject: [PATCH] Fixed: Layout of slot fill dialog is no longer broken by tall
 images, background is now the correct color

---
 app/imports/ui/creature/slots/SlotFillDialog.vue | 16 ++++++++++++----
 app/imports/ui/dialogStack/DialogBase.vue        |  8 ++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/imports/ui/creature/slots/SlotFillDialog.vue b/app/imports/ui/creature/slots/SlotFillDialog.vue
index edfe5278..8820c1e0 100644
--- a/app/imports/ui/creature/slots/SlotFillDialog.vue
+++ b/app/imports/ui/creature/slots/SlotFillDialog.vue
@@ -1,5 +1,8 @@
 <template lang="html">
-  <dialog-base :color="model.color">
+  <dialog-base
+    :color="model.color"
+    dark-body
+  >
     <template slot="toolbar">
       <v-toolbar-title>
         {{ model.name }}
@@ -16,9 +19,9 @@
             :key="node._id"
           >
             <v-card
-              style="max-width: 500px;"
               hover
               ripple
+              class="slot-card"
               :class="{'primary': node._id === (selectedNode && selectedNode._id)}"
               :dark="node._id === (selectedNode && selectedNode._id)"
               @click="selectedNode = node"
@@ -26,8 +29,8 @@
               <v-img
                 v-if="node.picture"
                 :src="node.picture"
-                :max-height="200"
-                position="top center"
+                :height="200"
+                contain
               />
               <v-card-title primary-title>
                 <div>
@@ -211,4 +214,9 @@ export default {
 </script>
 
 <style lang="css" scoped>
+.slot-card {
+  max-width: 500px;
+  width: 100%;
+  display: inline-block;
+}
 </style>
diff --git a/app/imports/ui/dialogStack/DialogBase.vue b/app/imports/ui/dialogStack/DialogBase.vue
index 212ac053..a4b23aa7 100644
--- a/app/imports/ui/dialogStack/DialogBase.vue
+++ b/app/imports/ui/dialogStack/DialogBase.vue
@@ -34,6 +34,7 @@
       v-if="!$slots['unwrapped-content']"
       id="base-dialog-body"
       v-scroll:#base-dialog-body="onScroll"
+      :class="{'dark-body': darkBody}"
     >
       <slot />
     </v-card-text>
@@ -56,6 +57,7 @@
         type: Function,
         default: undefined,
       },
+      darkBody: Boolean,
 		},
 		data(){ return {
 			offsetTop: 0,
@@ -95,4 +97,10 @@
 		flex-grow: 1;
 		overflow: auto;
 	}
+  #base-dialog-body.dark-body {
+    background-color: #fafafa;
+  }
+  .theme--dark #base-dialog-body.dark-body {
+    background-color: #303030;
+  }
 </style>