css fixes for ai editor views.

2 files changed, 68 insertions, 37 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 6dabcb8b2..46bd37f6d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -312,14 +312,28 @@
 
     .collectionfreeformview-aiView-prompt {
         height: 25px;
-        width: 100%;
+        width: 65%;
     }
 
     .collectionFreeFormView-aiView-strength {
         text-align: center;
         align-items: center;
         display: flex;
-        width: 150px;
+        width: 25%;
+        .collectionFreeFormView-aiView-similarity {
+            max-width: 65px;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .collectionFreeForView-aiView-send {
+        width: 10%;
+        .button-container {
+            width: 100% !important;
+            justify-content: left !important;
+        }
     }
 
     .collectionFreeformView-aiView-options-container,
@@ -341,5 +355,14 @@
         align-items: center;
         width: 100%;
         gap: 10px;
+        .collectionFreeformView-aiView-input {
+            width: 100%;
+        }
+        .collectionFreeFormView-aiView-regenBtn {
+            width: 10%;
+            .button-container {
+                width: 100% !important;
+            }
+        }
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index eeb97bf15..796949378 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2209,10 +2209,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
                             type="text"
                             value={this._drawingFillInput}
-                            onChange={action(e => {this._drawingFillInput = e.target.value})}
+                            onChange={action(e => {
+                                this._drawingFillInput = e.target.value;
+                            })}
                         />
-                        <div className="collectionfreeformview-aiView-strength">
-                            Similarity
+                        <div className="collectionFreeFormView-aiView-strength">
+                            <span className="collectionFreeFormView-aiView-similarity">Similarity</span>
                             <Slider
                                 className="collectionfreeformview-aiView-slider"
                                 sx={{
@@ -2229,23 +2231,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                                 valueLabelDisplay="auto"
                             />
                         </div>
-                        <Button
-                            text="Send"
-                            type={Type.SEC}
-                            icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                            iconPlacement="right"
-                            onClick={undoable(
-                                action(() => {
-                                    this._drawingFillLoading = true;
-                                    DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
-                                        action(() => {
-                                            this._drawingFillLoading = false;
-                                        })
-                                    );
-                                }),
-                                'create image'
-                            )}
-                        />
+                        <div className="collectionFreeFormView-aiView-send">
+                            <Button
+                                text="Send"
+                                type={Type.SEC}
+                                icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                iconPlacement="right"
+                                onClick={undoable(
+                                    action(() => {
+                                        this._drawingFillLoading = true;
+                                        DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
+                                            action(() => {
+                                                this._drawingFillLoading = false;
+                                            })
+                                        );
+                                    }),
+                                    'create image'
+                                )}
+                            />
+                        </div>
                     </div>
                 </div>
                 <div className="collectionfreeformview-aiView-regenerate-container">
@@ -2256,23 +2260,27 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             aria-label="Edit instructions input"
                             type="text"
                             value={this._regenInput}
-                            onChange={action(e => {this._regenInput = e.target.value})}
+                            onChange={action(e => {
+                                this._regenInput = e.target.value;
+                            })}
                             placeholder="..under development.."
                         />
-                        <Button
-                            text="Regenerate"
-                            type={Type.SEC}
-                            icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                            iconPlacement="right"
-                            // onClick={action(async () => {
-                            //     this._regenLoading = true;
-                            //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
-                            //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
-                            //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
-                            //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
-                            //     this._regenLoading = false;
-                            // })}
-                        />
+                        <div className="collectionFreeFormView-aiView-regenBtn">
+                            <Button
+                                text="Regenerate"
+                                type={Type.SEC}
+                                icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                iconPlacement="right"
+                                // onClick={action(async () => {
+                                //     this._regenLoading = true;
+                                //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
+                                //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
+                                //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
+                                //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
+                                //     this._regenLoading = false;
+                                // })}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>