put message input at the bottom

NielsPilgaard · Sep 3, 2023 · a23f586 · a23f586
1 parent 5f21d98
commit a23f586
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/web/Client/Features/Chat/LargeChatComponent.razor b/src/web/Client/Features/Chat/LargeChatComponent.razor
@@ -96,13 +96,12 @@
                                     Class="message-sent-successfully" />
                        </div>
                    }
+                <div class="flex-spacer"></div>
 
                     <MudTextField @bind-Value="_userText"
                                     FullWidth
                                     Immediate
                                     AutoFocus
-                                  id="chat-message-input"
-                                  Class="chat-message-input"
                                   Adornment="Adornment.End"
                                   TextUpdateSuppression="false"
                                   OnKeyDown="SendMessageOnEnter"

diff --git a/src/web/Client/wwwroot/css/chat.css b/src/web/Client/wwwroot/css/chat.css
@@ -40,3 +40,14 @@
 .message-sent-successfully {
     font-size: 14px;
 }
+.flex-spacer {
+    flex-grow: 1;
+}
+.chat-message-list .mud-input-control {
+    flex: none; /* or flex: none; depending on what you want */
+}
+.chat-message-list {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}