diff --git a/app/charts/shared/annotation-utils.ts b/app/charts/shared/annotation-utils.ts
index 657b4488d..3a85dcf44 100644
--- a/app/charts/shared/annotation-utils.ts
+++ b/app/charts/shared/annotation-utils.ts
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 
 import { useInteraction } from "@/charts/shared/use-interaction";
 import {
@@ -26,10 +26,14 @@ export const useIsEditingAnnotation = () => {
 
 export const useGetAnnotationRenderState = () => {
   const [interaction] = useInteraction();
+  const interactionRef = useRef(interaction);
+  interactionRef.current = interaction;
   const [state] = useConfiguratorState();
   const chartConfig = getChartConfig(state);
   const { activeField } = chartConfig;
   const isEditing = useIsEditingAnnotation();
+  const annotationsRef = useRef(chartConfig.annotations);
+  annotationsRef.current = chartConfig.annotations;
 
   const getAnnotationRenderState = useCallback(
     (
@@ -44,7 +48,7 @@ export const useGetAnnotationRenderState = () => {
     ) => {
       let annotation: Annotation | undefined;
 
-      for (const a of chartConfig.annotations) {
+      for (const a of annotationsRef.current) {
         const matches = matchesAnnotationTarget(observation, a.targets);
 
         if (matches) {
@@ -59,12 +63,14 @@ export const useGetAnnotationRenderState = () => {
         color = annotation.color;
       }
 
+      const currentInteraction = interactionRef.current;
       const interactionMatches =
-        interaction.type === "annotation" &&
-        interaction.visible &&
-        interaction.observation?.[`${axisComponentId}/__iri__`] === axisValue;
+        currentInteraction.type === "annotation" &&
+        currentInteraction.visible &&
+        currentInteraction.observation?.[`${axisComponentId}/__iri__`] ===
+          axisValue;
 
-      const targetsOtherAnnotations = chartConfig.annotations.some(
+      const targetsOtherAnnotations = annotationsRef.current.some(
         (a) =>
           a.key !== activeField &&
           matchesAnnotationTarget(observation, a.targets)
@@ -81,14 +87,7 @@ export const useGetAnnotationRenderState = () => {
         isActive,
       };
     },
-    [
-      activeField,
-      chartConfig.annotations,
-      interaction.observation,
-      interaction.type,
-      interaction.visible,
-      isEditing,
-    ]
+    [activeField, isEditing]
   );
 
   return getAnnotationRenderState;
diff --git a/app/components/multi-select/option.tsx b/app/components/multi-select/option.tsx
index e531d5f41..c549cb59b 100644
--- a/app/components/multi-select/option.tsx
+++ b/app/components/multi-select/option.tsx
@@ -65,9 +65,19 @@ export const MultiSelectOption = ({
         typography: selectSizeToTypography[size],
       }}
     >
-      {isNoneValue
-        ? t({ id: "controls.clear-selection", message: "Clear selection" })
-        : label}
+      <Typography
+        sx={{
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          flex: 1,
+          typography: selectSizeToTypography[size],
+        }}
+      >
+        {isNoneValue
+          ? t({ id: "controls.clear-selection", message: "Clear selection" })
+          : label}
+      </Typography>
       <Flex
         sx={{
           justifyContent: "flex-end",
diff --git a/app/components/multi-select/tags.tsx b/app/components/multi-select/tags.tsx
index 79f1be142..d79707cd4 100644
--- a/app/components/multi-select/tags.tsx
+++ b/app/components/multi-select/tags.tsx
@@ -45,12 +45,19 @@ export const MultiSelectTags = ({
                 display: "inline-flex",
                 alignItems: "center",
                 gap: 0.5,
-                py: 1,
+                maxWidth: "100%",
+                overflow: "hidden",
               }}
             >
               <Typography
                 variant={selectSizeToTypography[size]}
-                style={{ lineHeight: 1 }}
+                sx={{
+                  lineHeight: 1,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  minWidth: 0,
+                }}
               >
                 {option.label}
               </Typography>
diff --git a/app/components/select-tree.tsx b/app/components/select-tree.tsx
index 422d44c1e..91fae75db 100644
--- a/app/components/select-tree.tsx
+++ b/app/components/select-tree.tsx
@@ -215,7 +215,17 @@ const TreeItemContent = forwardRef<
     >
       <div className={clsx(classes.iconContainer)}>{icon}</div>
       <div className={classes.label}>
-        <Typography variant={selectSizeToTypography[size]} component="span">
+        <Typography
+          variant={selectSizeToTypography[size]}
+          component="span"
+          sx={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            display: "inline-block",
+            maxWidth: "100%",
+          }}
+        >
           {label}
         </Typography>
         {selectable && hasChildren ? (
@@ -648,11 +658,19 @@ export const SelectTree = ({
                             alignItems: "center",
                             gap: 0.5,
                             py: 1,
+                            maxWidth: "100%",
+                            overflow: "hidden",
                           }}
                         >
                           <Typography
                             variant={selectSizeToTypography[size]}
-                            style={{ lineHeight: 1 }}
+                            sx={{
+                              lineHeight: 1,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              minWidth: 0,
+                            }}
                           >
                             {labelsByValue[nodeId]}
                           </Typography>
@@ -695,7 +713,19 @@ export const SelectTree = ({
               return <Trans id="No filter">No filter</Trans>;
             }
 
-            return <>{value ? labelsByValue[value as string] : undefined}</>;
+            return (
+              <Typography
+                variant={selectSizeToTypography[size]}
+                sx={{
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  display: "block",
+                }}
+              >
+                {value ? labelsByValue[value as string] : undefined}
+              </Typography>
+            );
           }}
           sx={{
             "& svg": {
diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
index a95f33ac7..fe1b6e767 100644
--- a/app/configurator/components/filters.tsx
+++ b/app/configurator/components/filters.tsx
@@ -1230,9 +1230,9 @@ export const TimeFilter = (props: TimeFilterProps) => {
     return (
       <div>
         {!disableInteractiveFilters && (
-          <Flex sx={{ justifyContent: "flex-end", mb: 3 }}>
+          <Box sx={{ mb: 3 }}>
             <InteractiveTimeRangeToggle />
-          </Flex>
+          </Box>
         )}
         <Flex sx={{ gap: 1 }}>
           {rangeActiveFilter ? (