From c48793358bf3a70bd1c26791ff91e3ee57298c61 Mon Sep 17 00:00:00 2001
From: Mohamed Ould Hocine <mohamed.ould.hocine@graylog.com>
Date: Wed, 21 Sep 2022 13:06:44 +0200
Subject: [PATCH] added ModalSubTitle styling

---
 .../administration/CollectorConfigurationModal.tsx     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/graylog2-web-interface/src/components/sidecars/administration/CollectorConfigurationModal.tsx b/graylog2-web-interface/src/components/sidecars/administration/CollectorConfigurationModal.tsx
index 5ad4e6fb55581..4cdd740431d81 100644
--- a/graylog2-web-interface/src/components/sidecars/administration/CollectorConfigurationModal.tsx
+++ b/graylog2-web-interface/src/components/sidecars/administration/CollectorConfigurationModal.tsx
@@ -93,6 +93,12 @@ const ModalTitle = styled(Modal.Title)`
   line-height: 1.1;
 `;
 
+const ModalSubTitle = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
 const CollectorConfigurationModal = (props) => {
   const [nextAssignedConfigurations, setNextAssignedConfigurations] = React.useState([]);
 
@@ -226,7 +232,9 @@ const CollectorConfigurationModal = (props) => {
           <Modal.Header>
             <ModalTitle>
               Edit <b>{selectedLogCollectors[0]?.name}</b> Configurations
-              <div><small>sidecars: {selectedSidecarCollectorPairs.map(({ sidecar }) => sidecar.node_name).join(', ')}</small></div>
+              <ModalSubTitle>
+                <small>sidecars: {selectedSidecarCollectorPairs.map(({ sidecar }) => sidecar.node_name).join(', ')}</small>
+              </ModalSubTitle>
             </ModalTitle>
           </Modal.Header>
           <Modal.Body>