From d431f528ac0de99e64f0c293d6e9f9c460d74be7 Mon Sep 17 00:00:00 2001
From: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>
Date: Tue, 27 Oct 2020 13:49:23 +0000
Subject: [PATCH] Be more resilient to different element sizes

---
 Client/Shared/CodeCell.razor     | 49 +++++++++++++++++---------------
 Client/Shared/CodeCell.razor.css |  9 ++----
 2 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/Client/Shared/CodeCell.razor b/Client/Shared/CodeCell.razor
index a053899..47731ad 100644
--- a/Client/Shared/CodeCell.razor
+++ b/Client/Shared/CodeCell.razor
@@ -4,34 +4,34 @@
 @inject HttpClient Http
 
 <div class="code-cell">
-    <div class="toolbar">
-        <button @onclick="RunCell">
-            &#x25BA;
-        </button>
+    <div class="top">
+        <div class="toolbar">
+            <button @onclick="RunCell">&#x25BA;</button>
+        </div>
+        <CodeEditor @bind-Code="cell.Content" OnCompletionsRequested="GetCompletionsAsync" />
     </div>
-    <CodeEditor @bind-Code="cell.Content" OnCompletionsRequested="GetCompletionsAsync" />
-    <div class="break" />
-
-    @* TODO: Create a cleaner system for formatting different kinds of output/status *@
-    @if (isEvaluating)
-    {
-        <div class="output">...</div>
-    }
-    else if (result != null)
-    {
-        if (!string.IsNullOrEmpty(result.CommandFailedMessage))
+    <div class="output @ResultCssClass">
+        @* TODO: Create a cleaner system for formatting different kinds of output/status *@
+        @if (isEvaluating)
         {
-            <div class="output command-failed">@result.CommandFailedMessage</div>
+            <text>...</text>
         }
-        else if (result.Output != null)
+        else if (result != null)
         {
-            <div class="output">@result.Output</div>
+            if (!string.IsNullOrEmpty(result.CommandFailedMessage))
+            {
+                @result.CommandFailedMessage
+            }
+            else if (result.Output != null)
+            {
+                @result.Output
+            }
+            else
+            {
+                <text>(No output)</text>
+            }
         }
-        else
-        {
-            <div class="output">(No output)</div>
-        }
-    }
+    </div>
 </div>
 
 @code {
@@ -41,6 +41,9 @@
     private ExecuteResult result;
     private bool isEvaluating;
 
+    private string ResultCssClass
+        => !string.IsNullOrEmpty(result?.CommandFailedMessage) ? "command-failed" : null;
+
     private async Task RunCell()
     {
         try
diff --git a/Client/Shared/CodeCell.razor.css b/Client/Shared/CodeCell.razor.css
index 1c100f0..b62b6b4 100644
--- a/Client/Shared/CodeCell.razor.css
+++ b/Client/Shared/CodeCell.razor.css
@@ -1,14 +1,10 @@
 .code-cell {
-    display: flex;
-    flex: 0 0 100%;
-    flex-wrap: wrap;
     margin: 10px;
     border: 1px solid #bfbfbf;
 }
 
-.break {
-    flex-basis: 100%;
-    height: 0;
+.top {
+    display: flex;
 }
 
 input {
@@ -27,7 +23,6 @@ input {
 }
 
 .output {
-    width: 100%;
     padding: 10px;
     background-color: #eee;
 }