fix(web): timeline and asset viewer RTL support (#26513)

web/src/lib/components/timeline/AssetLayout.svelte

@@ -47,7 +47,7 @@
       data-asset-id={asset.id}
       class="absolute"
       style:top={position.top + 'px'}
-      style:left={position.left + 'px'}
+      style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}
       style:height={position.height + 'px'}
       out:scale|global={{ start: 0.1, duration: scaleDuration }}

web/src/lib/components/timeline/Month.svelte

@@ -54,7 +54,6 @@
 </script>
 
 {#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
   {@const isDayGroupSelected = assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <section
@@ -64,7 +63,8 @@
     ]}
     data-group
     style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    style:inset-inline-start={dayGroup.start + 'px'}
+    style:top={dayGroup.top + 'px'}
     onmouseenter={() => (hoveredDayGroup = dayGroup.groupTitle)}
     onmouseleave={() => (hoveredDayGroup = null)}
   >

web/src/lib/components/timeline/Timeline.svelte

@@ -617,7 +617,7 @@
 <section
   id="asset-grid"
   class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
-  style:margin-right={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
+  style:margin-inline-end={(usingMobileDevice ? 0 : scrubberWidth) + 'px'}
   tabindex="-1"
   bind:clientHeight={timelineManager.viewportHeight}
   bind:clientWidth={timelineManager.viewportWidth}