Video-Recording-Fixed

dist/popup.js

@@ -946,6 +946,12 @@ ${description}
 
           // Store the video blob for later submission
           this.recordedVideo = mp4Blob;
+
+          // Show the main form again and restore window size
+          document.body.classList.remove('recording');
+          this.feedbackForm.classList.remove('hidden');
+          window.resizeTo(400, 600); // Restore original size
+
           this.showNotification('Recording saved successfully!', 'success');
         } catch (error) {
           console.error('Error converting video:', error);
@@ -956,7 +962,9 @@ ${description}
       // Start recording
       this.mediaRecorder.start(1000); // Collect data every second
 
-      // Show recording dialog
+      // Hide the main form and show recording dialog
+      document.body.classList.add('recording');
+      this.feedbackForm.classList.add('hidden');
       this.recordingDialog.classList.remove('hidden');
 
       // Set up stop recording button
@@ -967,11 +975,14 @@ ${description}
         }
       };
 
-      // Minimize extension popup
+      // Minimize window to only show recording controls
       window.resizeTo(300, 100);
     } catch (error) {
       console.error('Screen recording error:', error);
       this.showNotification('Error starting screen recording: ' + error.message, 'error');
+      // Make sure main form is visible if there's an error
+      document.body.classList.remove('recording');
+      this.feedbackForm.classList.remove('hidden');
     }
   }
   async convertToMP4(webmBlob) {

dist/styles/recording-dialog.css

@@ -1,19 +1,27 @@
 .recording-dialog {
   position: fixed;
-  top: 10px;
+  top: 0;
-  right: 10px;
+  left: 0;
+  right: 0;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   z-index: 10000;
-  width: 250px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .recording-dialog.hidden {
   display: none;
 }
 
+body.recording {
+  min-height: 100px;
+  overflow: hidden;
+}
+
+body.recording #app > *:not(.recording-dialog) {
+  display: none;
+}
+
 .recording-content {
   display: flex;
   flex-direction: column;
@@ -52,6 +60,7 @@
 }
 
 #stop-recording {
+  width: 100%;
   background: #DE350B;
   color: white;
   border: none;

js/popup.js

@@ -513,6 +513,11 @@ ${description}
 
           // Store the video blob for later submission
           this.recordedVideo = mp4Blob;
+
+          // Show the main form again and restore window size
+          document.body.classList.remove('recording');
+          this.feedbackForm.classList.remove('hidden');
+          window.resizeTo(400, 600); // Restore original size
           
           this.showNotification('Recording saved successfully!', 'success');
         } catch (error) {
@@ -524,7 +529,9 @@ ${description}
       // Start recording
       this.mediaRecorder.start(1000); // Collect data every second
 
-      // Show recording dialog
+      // Hide the main form and show recording dialog
+      document.body.classList.add('recording');
+      this.feedbackForm.classList.add('hidden');
       this.recordingDialog.classList.remove('hidden');
 
       // Set up stop recording button
@@ -535,12 +542,15 @@ ${description}
         }
       };
 
-      // Minimize extension popup
+      // Minimize window to only show recording controls
       window.resizeTo(300, 100);
 
     } catch (error) {
       console.error('Screen recording error:', error);
       this.showNotification('Error starting screen recording: ' + error.message, 'error');
+      // Make sure main form is visible if there's an error
+      document.body.classList.remove('recording');
+      this.feedbackForm.classList.remove('hidden');
     }
   }
 

styles/recording-dialog.css

@@ -1,19 +1,27 @@
 .recording-dialog {
   position: fixed;
-  top: 10px;
+  top: 0;
-  right: 10px;
+  left: 0;
+  right: 0;
   background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   padding: 15px;
   z-index: 10000;
-  width: 250px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .recording-dialog.hidden {
   display: none;
 }
 
+body.recording {
+  min-height: 100px;
+  overflow: hidden;
+}
+
+body.recording #app > *:not(.recording-dialog) {
+  display: none;
+}
+
 .recording-content {
   display: flex;
   flex-direction: column;
@@ -52,6 +60,7 @@
 }
 
 #stop-recording {
+  width: 100%;
   background: #DE350B;
   color: white;
   border: none;