Implement input-with-button layout in import modal for improved user experience

- Added a new input-with-button component to the import modal, allowing users to input an image URL and fetch the image with a button click.
- Removed the previous button placement to streamline the UI and enhance usability.
- Updated CSS styles for the new component to ensure proper layout and responsiveness.

static/css/components/import-modal.css

@@ -389,6 +389,32 @@
     margin-bottom: var(--space-2);
 }
 
+.input-with-button {
+    display: flex;
+    gap: 8px;
+}
+
+.input-with-button input {
+    flex: 1;
+    min-width: 0;
+}
+
+.input-with-button button {
+    flex-shrink: 0;
+    white-space: nowrap;
+    padding: 8px 16px;
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.input-with-button button:hover {
+    background: oklch(from var(--lora-accent) l c h / 0.9);
+}
+
 .input-group label {
     display: block;
     margin-bottom: 8px;
@@ -405,14 +431,6 @@
     color: var(--text-color);
 }
 
-.input-group button {
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border: none;
-    padding: 8px 16px;
-    border-radius: var(--border-radius-xs);
-}
-
 .error-message {
     color: var(--lora-error);
     font-size: 0.9em;
@@ -660,4 +678,4 @@
 .deleted-badge i {
     margin-right: 4px;
     font-size: 0.9em;
-}
+}

templates/components/import_modal.html

@@ -34,14 +34,14 @@
                 <p>Input a Civitai image URL to import as a recipe.</p>
                 <div class="input-group">
                     <label for="imageUrlInput">Image URL:</label>
-                    <input type="text" id="imageUrlInput" placeholder="https://civitai.com/images/...">
+                    <div class="input-with-button">
+                        <input type="text" id="imageUrlInput" placeholder="https://civitai.com/images/...">
+                        <button class="primary-btn" onclick="importManager.handleUrlInput()">
+                            <i class="fas fa-download"></i> Fetch Image
+                        </button>
+                    </div>
                     <div class="error-message" id="urlError"></div>
                 </div>
-                <div class="input-group">
-                    <button class="primary-btn" onclick="importManager.handleUrlInput()">
-                        <i class="fas fa-download"></i> Fetch Image
-                    </button>
-                </div>
             </div>
             
             <div class="modal-actions">