fix(viewport): Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings (#4037)

platform/ui/src/components/SegmentationGroupTable/AddSegmentRow.tsx

@@ -7,7 +7,7 @@ function AddSegmentRow({ onClick, onToggleSegmentationVisibility = null, segment
   return (
     <div className="flex justify-between bg-black pl-[34px] hover:cursor-pointer">
       <div
-        className="group pt-[5px] pb-[5px]"
+        className="group py-[5px] pb-[5px]"
         onClick={onClick}
       >
         <div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] pr-2">

platform/ui/src/components/SegmentationGroupTable/NoSegmentationRow.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import Icon from '../Icon';
 import { useTranslation } from 'react-i18next';
 
-function NoSegmentationRow({ onSegmentationAdd }) {
+function NoSegmentationRow({ onSegmentationAdd, addSegmentationClassName }) {
   const { t } = useTranslation('SegmentationTable');
   return (
     <div
-      className="group"
+      className={`group ${addSegmentationClassName}`}
       onClick={onSegmentationAdd}
     >
       <div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] group-hover:cursor-pointer">

platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx

@@ -15,6 +15,7 @@ function SegmentationDropDownRow({
   storeSegmentation,
   onSegmentationDelete,
   onSegmentationAdd,
+  addSegmentationClassName,
 }) {
   const handleChange = option => {
     onActiveSegmentationChange(option.value); // Notify the parent
@@ -41,7 +42,7 @@ function SegmentationDropDownRow({
           id="segmentation-dropdown"
           showDropdownIcon={false}
           alignment="left"
-          itemsClassName="text-primary-active"
+          itemsClassName={`text-primary-active ${addSegmentationClassName}`}
           showBorders={false}
           maxCharactersPerLine={30}
           list={[

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -42,6 +42,7 @@ const SegmentationGroupTable = ({
   setRenderFill,
   setRenderInactiveSegmentations,
   setRenderOutline,
+  addSegmentationClassName,
 }) => {
   const [isConfigOpen, setIsConfigOpen] = useState(false);
   const [activeSegmentationId, setActiveSegmentationId] = useState(null);
@@ -100,9 +101,12 @@ const SegmentationGroupTable = ({
         )}
         <div className="bg-primary-dark ">
           {segmentations?.length === 0 ? (
-            <div className="select-none bg-black pt-[5px] pb-[5px]">
+            <div className="select-none bg-black py-[3px]">
               {showAddSegmentation && !disableEditing && (
-                <NoSegmentationRow onSegmentationAdd={onSegmentationAdd} />
+                <NoSegmentationRow
+                  onSegmentationAdd={onSegmentationAdd}
+                  addSegmentationClassName={addSegmentationClassName}
+                />
               )}
             </div>
           ) : (
@@ -118,6 +122,7 @@ const SegmentationGroupTable = ({
                 onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
                 storeSegmentation={storeSegmentation}
                 onSegmentationAdd={onSegmentationAdd}
+                addSegmentationClassName={addSegmentationClassName}
                 onToggleSegmentationVisibility={onToggleSegmentationVisibility}
               />
               {!disableEditing && showAddSegment && (