From 9e1ac3f9d9f3d08e9212f5f53d5ecf2a18f19e78 Mon Sep 17 00:00:00 2001
From: Laura Bergenthal-Grotluschen
 <197286649+laura-b-g@users.noreply.github.com>
Date: Fri, 10 Jul 2026 14:47:21 +0200
Subject: [PATCH] Add styled container for retention configuration segments

---
 ...tRotationRetentionConfigurationSection.tsx |  9 +++++++--
 ...ationRetentionDataTieringConfiguration.tsx | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionConfigurationSection.tsx b/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionConfigurationSection.tsx
index 36d460c58b43..06c31d5b528b 100644
--- a/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionConfigurationSection.tsx
+++ b/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionConfigurationSection.tsx
@@ -40,6 +40,11 @@ type Props = {
   selectedRetentionSegment: RetentionConfigSegment;
   setSelectedRetentionSegment: React.Dispatch<React.SetStateAction<RetentionConfigSegment>>;
 };
+const SegmentedControlContainer = styled.div(
+  ({ theme }) => css`
+    margin-top: ${theme.spacings.md};
+  `,
+);
 
 const ConfigSegment = styled.div(
   ({ theme }) => css`
@@ -115,7 +120,7 @@ const IndexSetRotationRetentionConfigurationSection = ({
 
   return (
     <Section title="Rotation & Retention">
-      <>
+      <SegmentedControlContainer>
         <SegmentedControl<RetentionConfigSegment>
           data={retentionConfigSegments}
           value={selectedRetentionSegment}
@@ -142,7 +147,7 @@ const IndexSetRotationRetentionConfigurationSection = ({
             />
           </ConfigSegment>
         )}
-      </>
+      </SegmentedControlContainer>
     </Section>
   );
 };
diff --git a/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionDataTieringConfiguration.tsx b/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionDataTieringConfiguration.tsx
index f4555011cad3..16da387ce791 100644
--- a/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionDataTieringConfiguration.tsx
+++ b/graylog2-web-interface/src/components/indices/IndexSetConfigurationForm/IndexSetRotationRetentionDataTieringConfiguration.tsx
@@ -15,6 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
+import styled, { css } from 'styled-components';
 
 import { DataTieringVisualisation, DataTieringConfiguration } from 'components/indices/data-tiering';
 import type { IndexSetFormValues } from 'stores/indices/IndexSetsStore';
@@ -26,6 +27,12 @@ type Props = {
   ignoreFieldRestrictions: boolean;
 };
 
+const DataTieringConfigContainer = styled.div(
+  ({ theme }) => css`
+    margin-top: ${theme.spacings.lg};
+  `,
+);
+
 const IndexSetRotationRetentionDataTieringConfiguration = ({
   values,
   hiddenFields = [],
@@ -41,11 +48,13 @@ const IndexSetRotationRetentionDataTieringConfiguration = ({
       archiveData={values.data_tiering?.archive_before_deletion}
     />
     {(!hiddenFields.includes('data_tiering') || ignoreFieldRestrictions) && (
-      <DataTieringConfiguration
-        hiddenFields={hiddenFields}
-        immutableFields={immutableFields}
-        ignoreFieldRestrictions={ignoreFieldRestrictions}
-      />
+      <DataTieringConfigContainer>
+        <DataTieringConfiguration
+          hiddenFields={hiddenFields}
+          immutableFields={immutableFields}
+          ignoreFieldRestrictions={ignoreFieldRestrictions}
+        />
+      </DataTieringConfigContainer>
     )}
   </>
 );