Edit pic fixes

Components/EditPicDialog.razor

@@ -4,7 +4,9 @@
 
 <div class="overlay" data-ui="#@id"></div>
 <dialog id="@id">
-  <img src="@Pic?.Url" />
+  <div class="padding center-align">
+    <img src="@Pic?.Url" class="small-height square" />
+  </div>
   <div class="row">
     <div class="field textarea label border max">
       <InputTextArea @bind-Value="Description"></InputTextArea>
@@ -32,8 +34,10 @@
     set {
       _pic = value;
       Description = _pic?.Description;
+      InvokeAsync(StateHasChanged);
     }
   }
+
   public string? Description { get; set; }
   private bool loading = false;
   [Parameter]
@@ -47,7 +51,7 @@
     loading = true;
     await InvokeAsync(StateHasChanged);
 
-    if(!string.IsNullOrEmpty(Pic.Id)) {
+    if(!string.IsNullOrEmpty(Pic?.Id)) {
       await api.PostPicDescription(State.SelectedAddressName, Pic.Id, Description);
       await State.RefreshPics();
       await InvokeAsync(StateHasChanged);

Components/PicCard.razor

@@ -12,7 +12,15 @@
         <i class="fa fa-clock"></i> @Pic.RelativeTime
       </a>
     </nav>
-    <p>@((MarkupString)Pic.DescriptionHtml)</p>
+    @if(!string.IsNullOrWhiteSpace(Pic.Description)){
+      <p>@((MarkupString)Pic.DescriptionHtml)</p>
+    }
+    else {
+      <div class="padding padding yellow-2-bg yellow-9-fg">
+        <i class="fa-solid fa-triangle-exclamation"></i>
+        <span>This picture needs a description in order to be shared.</span>
+      </div>
+    }
     <nav>
       <div class="max"></div>
       @if(Editable) {
@@ -35,7 +43,7 @@
 
   private async Task EditPic(EventArgs e){
     Dialog.Pic = Pic;
-    // await InvokeAsync(StateHasChanged);
+    await InvokeAsync(StateHasChanged);
     await JS.InvokeVoidAsync("ui", "#" + Dialog?.id);
   }