add css for image-textarea and generate-image-button to set display:none when in page-container, updated block_builder.py and template_update.html to include image-textarea

block_builder.py

@@ -163,8 +163,8 @@ def build_title_block(title,description,backstory,reputation):
 def build_image_block(sd_prompt, block_id):
     image_block_html = f"""
     <div class="block-item" data-block-id="{block_id}">
-        <textarea class="string-action-description-textarea" id="user-storefront-prompt-{block_id}"
-                  hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML"
+        <textarea class="image-textarea" id="sdprompt-{block_id}"
+                  hx-post="/update-stats" hx-trigger="change" hx-target="#sd-prompt-{block_id}" hx-swap="outerHTML"
                   title="Storefront image description">{sd_prompt}</textarea>
         <button class="generate-image-button" data-block-id="{block_id}">Generate Image</button>
         <img id="generated-image-{block_id}" alt="" style="display: none; cursor: pointer;">

storeUI.css

@@ -470,6 +470,41 @@
       resize: none; /* Prevents the textarea from being manually resizable */
       overflow: hidden; /* Hide scrollbars */
   }
+
+    .image-textarea {
+        width: 100%;
+        height: 16px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 16px;
+        margin-bottom: 0;
+        box-sizing: border-box;
+        border: 0;
+        font-family: "ScalySansRemake";
+        vertical-align: baseline;
+        margin: 0;
+        padding: 0;
+        overflow-wrap: break-word;
+        text-rendering: optimizeLegibility;
+        background: none;
+        resize: none; /* Prevents the textarea from being manually resizable */
+        overflow: hidden; /* Hide scrollbars */
+    }
+
+        .page-container .image-textarea {
+            display: none; /* Hidden by default when in .page-container */
+    }
+
+        .page-container .block-content:hover .image-textarea {
+            display: block; /* Show when hovering over .block-content */
+    }
+    .page-container .generate-image-button {
+        display: none; /* Hidden by default when in .page-container */
+    }
+    
+    .page-container .block-content:hover .generate-image-button {
+        display: inline-block; /* Show the button on hover */
+    }
   
   .block.monster.frame.wide {
       column-count: inherit;

template_update.html

@@ -9,7 +9,7 @@
     </div>
     
     <div class="block-item" data-block-id="1" data-page-id="block-container" draggable="true">
-        <textarea class="string-action-description-textarea" id="user-storefront-prompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of a curious sentient potted plant in a vibrant gear shop. The plant has phosphorescent leaves and delicate, intricate roots. The shop is filled with glowing flora, magical tools, and adventure gear. The background shows enchanted trees intertwined with the walls and ceiling.</textarea>
+        <textarea class="image-textarea" id="user-storefront-prompt-1" hx-post="/update-stats" hx-trigger="change" hx-target="#user-sd-prompt" hx-swap="outerHTML" title="Storefront image description" style="height: 80px;">A highly detailed fantasy painting of a curious sentient potted plant in a vibrant gear shop. The plant has phosphorescent leaves and delicate, intricate roots. The shop is filled with glowing flora, magical tools, and adventure gear. The background shows enchanted trees intertwined with the walls and ceiling.</textarea>
         <button class="generate-image-button" data-block-id="1">Generate Image</button>
         <img id="generated-image-1" alt="" style="display: none; cursor: pointer;">
     </div>