fix: Disable all tools on preview mode (undo, redo, reset, etc.)

frontend-tools/video-editor/client/src/styles/TwoRowTooltip.css

@@ -23,7 +23,7 @@
 }
 
 .tooltip-row:first-child {
-  margin-bottom: 6px; 
+  margin-bottom: 6px;
 }
 
 .tooltip-time-btn {
@@ -56,6 +56,17 @@
   overflow: hidden !important;
 }
 
+/* Disabled state for time display */
+.tooltip-time-display.disabled {
+  pointer-events: none !important;
+  cursor: not-allowed !important;
+  opacity: 0.6 !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+}
+
 .tooltip-actions {
   display: flex;
   justify-content: space-between;
@@ -69,13 +80,13 @@
   background-color: #f3f4f6;
   border: none;
   border-radius: 4px;
-  padding: 5px; 
+  padding: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: #4b5563;
-  width: 26px; 
+  width: 26px;
   height: 26px;
   min-width: 20px !important;
   position: relative; /* Add relative positioning for tooltips */
@@ -107,7 +118,7 @@
 
 /* Triangle arrow pointing up to the button */
 .tooltip-action-btn[data-tooltip]:after {
-  content: '';
+  content: "";
   position: absolute;
   top: 35px; /* Match the before element */
   left: 50%; /* Center horizontally */
@@ -175,7 +186,7 @@
 }
 
 .tooltip-action-btn.play-from-start {
-  color: #4f46e5; 
+  color: #4f46e5;
 }
 
 .tooltip-action-btn.play-from-start:hover {
@@ -194,7 +205,7 @@
   padding: 6px 10px;
   display: flex;
   flex-direction: row;
-  color: #10b981; 
+  color: #10b981;
 }
 
 .tooltip-action-btn.new-segment:hover {
@@ -267,40 +278,40 @@
 /* Additional mobile optimizations */
 @media (max-width: 768px) {
   .two-row-tooltip {
-    padding: 4px; 
+    padding: 4px;
   }
-  
+
   .tooltip-row:first-child {
-    margin-bottom: 4px; 
+    margin-bottom: 4px;
   }
-  
+
   .tooltip-time-btn {
     min-width: 20px !important;
     font-size: 0.7rem !important;
     padding: 3px 6px !important;
   }
-  
+
   .tooltip-time-display {
     font-size: 0.8rem !important;
     padding: 3px 4px !important;
     min-width: 90px !important;
   }
-  
+
   .tooltip-action-btn {
     width: 24px;
     height: 24px;
     padding: 4px;
   }
-  
+
   .tooltip-action-btn.new-segment {
     padding: 4px 8px;
   }
-  
+
   .tooltip-action-btn svg {
     width: 14px;
     height: 14px;
   }
-  
+
   /* Adjust tooltip position for small screens - maintain the same position but adjust size */
   .tooltip-action-btn[data-tooltip]:before {
     min-width: 100px;
@@ -309,7 +320,7 @@
     height: 24px;
     top: 33px; /* Maintain the same relative distance on mobile */
   }
-  
+
   .tooltip-action-btn[data-tooltip]:after {
     top: 33px; /* Match the tooltip position */
   }