feat: Add support for remote video analysis and preview for recipe imports. see #420

static/css/components/import-modal.css

@@ -1,7 +1,8 @@
 /* Import Modal Styles */
 .import-step {
     margin: var(--space-2) 0;
-    transition: none !important; /* Disable any transitions that might affect display */
+    transition: none !important;
+    /* Disable any transitions that might affect display */
 }
 
 /* Import Mode Toggle */
@@ -107,7 +108,8 @@
     justify-content: center;
 }
 
-.recipe-image img {
+.recipe-image img,
+.recipe-preview-video {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
@@ -379,7 +381,7 @@
     .recipe-details-layout {
         grid-template-columns: 1fr;
     }
-    
+
     .recipe-image-container {
         height: 150px;
     }
@@ -512,14 +514,17 @@
 
 /* Prevent layout shift with scrollbar */
 .modal-content {
-    overflow-y: scroll; /* Always show scrollbar */
-    scrollbar-gutter: stable; /* Reserve space for scrollbar */
+    overflow-y: scroll;
+    /* Always show scrollbar */
+    scrollbar-gutter: stable;
+    /* Reserve space for scrollbar */
 }
 
 /* For browsers that don't support scrollbar-gutter */
 @supports not (scrollbar-gutter: stable) {
     .modal-content {
-        padding-right: calc(var(--space-2) + var(--scrollbar-width)); /* Add extra padding for scrollbar */
+        padding-right: calc(var(--space-2) + var(--scrollbar-width));
+        /* Add extra padding for scrollbar */
     }
 }
 
@@ -586,7 +591,8 @@
 
 /* Remove the old warning-message styles that were causing layout issues */
 .warning-message {
-    display: none; /* Hide the old style */
+    display: none;
+    /* Hide the old style */
 }
 
 /* Update deleted badge to be more prominent */
@@ -613,7 +619,8 @@
     color: var(--lora-error);
     font-size: 0.9em;
     margin-top: 8px;
-    min-height: 20px; /* Ensure there's always space for the error message */
+    min-height: 20px;
+    /* Ensure there's always space for the error message */
     font-weight: 500;
 }
 
@@ -662,8 +669,15 @@
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .duplicate-warning {
@@ -779,6 +793,7 @@
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
 }
 
@@ -793,9 +808,9 @@
     opacity: 0.8;
 }
 
-.duplicate-recipe-date, 
+.duplicate-recipe-date,
 .duplicate-recipe-lora-count {
     display: flex;
     align-items: center;
     gap: 4px;
-}
+}