Prevent split tunnel app name overflow

3 files changed, 18 insertions, 3 deletions

diff --git a/gui/src/renderer/components/Accordion.tsx b/gui/src/renderer/components/Accordion.tsx
index 01c0733165..a9b07a7493 100644
--- a/gui/src/renderer/components/Accordion.tsx
+++ b/gui/src/renderer/components/Accordion.tsx
@@ -26,6 +26,7 @@ const Content = styled.div({
   flexDirection: 'column',
   flex: 1,
   height: 'fit-content',
+  width: '100%',
 });
 
 export default class Accordion extends React.Component<IProps, IState> {
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index 97a4e5189c..278cbd90a8 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -45,6 +45,8 @@ import {
   StyledNoResult,
   StyledNoResultSearchTerm,
   StyledDisabledWarning,
+  StyledActionIcon,
+  StyledCellWarningIcon,
 } from './SplitTunnelingSettingsStyles';
 
 export default function SplitTunneling() {
@@ -280,7 +282,9 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) {
           <StyledIconPlaceholder />
         )}
         <StyledCellLabel lookDisabled={disabled}>{props.application.name}</StyledCellLabel>
-        {props.application.warning && <Cell.Icon source="icon-alert" tintColor={warningColor} />}
+        {props.application.warning && (
+          <StyledCellWarningIcon source="icon-alert" tintColor={warningColor} />
+        )}
       </StyledCellButton>
       {showWarning && (
         <ModalAlert
@@ -525,7 +529,7 @@ function ApplicationRow<T extends IApplication>(props: IApplicationRowProps<T>)
       )}
       <StyledCellLabel>{props.application.name}</StyledCellLabel>
       {props.onSelect && (
-        <ImageView
+        <StyledActionIcon
           source="icon-add"
           width={24}
           height={24}
@@ -535,7 +539,7 @@ function ApplicationRow<T extends IApplication>(props: IApplicationRowProps<T>)
         />
       )}
       {props.onRemove && (
-        <ImageView
+        <StyledActionIcon
           source="icon-remove"
           width={24}
           height={24}
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index ca7b7954ec..a551f55d55 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -47,10 +47,20 @@ export const StyledIcon = styled(Cell.UntintedIcon)(disabledApplication, {
   marginRight: '12px',
 });
 
+export const StyledActionIcon = styled(ImageView)({
+  marginLeft: '6px',
+});
+
+export const StyledCellWarningIcon = styled(Cell.Icon)({
+  marginLeft: '6px',
+});
+
 export const StyledCellLabel = styled(Cell.Label)(disabledApplication, {
   fontFamily: 'Open Sans',
   fontWeight: 'normal',
   fontSize: '16px',
+  wordWrap: 'break-word',
+  overflow: 'hidden',
 });
 
 export const StyledIconPlaceholder = styled.div({