From 3d3e9e597b2f50919ecce6c2f547a227cece3aaf Mon Sep 17 00:00:00 2001
From: David Straub <straub@protonmail.com>
Date: Sat, 28 Dec 2024 18:12:28 +0100
Subject: [PATCH] Try to fix UI bug #540

---
 src/components/GrampsjsChat.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/GrampsjsChat.js b/src/components/GrampsjsChat.js
index 51dd0694..63ff1469 100644
--- a/src/components/GrampsjsChat.js
+++ b/src/components/GrampsjsChat.js
@@ -18,18 +18,21 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
       sharedStyles,
       css`
         :host {
-          height: 100%;
           display: flex;
+          flex: 1;
+          height: 100%;
           flex-direction: column;
         }
 
         .outer {
+          flex: 1;
           height: 100%;
           display: flex;
           flex-direction: column;
         }
 
         .container {
+          flex: 1;
           height: 100%;
           display: flex;
           flex-direction: column;
@@ -90,10 +93,8 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
 
         .clear-btn {
           position: relative;
-          float: left;
           top: 20px;
           left: 0px;
-          margin: 1px solid red;
         }
       `,
     ]
@@ -114,16 +115,16 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
 
   render() {
     return html`
-    <div class="clear-btn">
-        <mwc-button
-          raised
-          label="${this._('New')}"
-          icon="clear_all"
-          @click="${this._handleClear}"
-          ?disabled=${this.messages.length === 0}
-        ></mwc-button>
-        </div>
         <div class="outer">
+          <div class="clear-btn">
+            <mwc-button
+              raised
+              label="${this._('New')}"
+              icon="clear_all"
+              @click="${this._handleClear}"
+              ?disabled=${this.messages.length === 0}
+            ></mwc-button>
+          </div>
           <div class="container">
             <div class="conversation">
               ${