diff --git a/src/cssStyles.tsx b/src/cssStyles.tsx
index 1ddde5004..a96b39391 100644
--- a/src/cssStyles.tsx
+++ b/src/cssStyles.tsx
@@ -4,7 +4,6 @@
 import { css, Global, keyframes } from "@emotion/react";
 import React from "react";
 import emotionNormalize from "emotion-normalize";
-import { checkFlexGapSupport } from "./util/utilityFunctions";
 import { createTheme } from "@mui/material/styles";
 import { Theme, useTheme } from "./themes";
 import { StylesConfig } from "react-select";
@@ -39,43 +38,6 @@ export const globalStyle = (theme: Theme) => css({
 export const BREAKPOINT_SMALL = 450;
 export const BREAKPOINT_MEDIUM = 650;
 
-
-/**
- * CSS for replacing flexbox gap in browers that do not support it
- * Does not return a css prop, but is meant as a direct replacement for "gap"
- * Example: ...(flexGapReplacementStyle(30, false))
- */
-export const flexGapReplacementStyle = (flexGapValue: number, flexDirectionIsRow: boolean) => {
-
-  const half = flexGapValue / 2;
-  const quarter = flexGapValue / 4;
-
-  return (
-    {
-      // Use gap if supported
-      ...(checkFlexGapSupport()) && { gap: `${flexGapValue}px` },
-      // Else use margins
-      ...(!checkFlexGapSupport()) &&
-      {
-        ">*": { // For each child
-          marginTop: `${quarter}px`,
-          marginBottom: `${quarter}px`,
-          marginRight: `${half}px`,
-          marginLeft: `${half}px`,
-        },
-        ...(flexDirectionIsRow) && {
-          ">*:first-of-type": {
-            marginLeft: "0px",
-          },
-          ">*:last-child": {
-            marginRight: "0px",
-          },
-        },
-      },
-    }
-  );
-};
-
 /**
  * CSS for buttons
  */
@@ -94,7 +56,7 @@ export const basicButtonStyle = (theme: Theme) => css({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
   textAlign: "center" as const,
   outline: `${theme.button_outline}`,
 });
@@ -110,7 +72,7 @@ export const deactivatedButtonStyle = css({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
   textAlign: "center" as const,
 });
 
@@ -131,7 +93,7 @@ export const navigationButtonStyle = (theme: Theme) => css({
 export const backOrContinueStyle = css(({
   display: "flex",
   flexDirection: "row",
-  ...(flexGapReplacementStyle(20, false)),
+  gap: "20px",
 }));
 
 /**
@@ -143,7 +105,7 @@ export const tileButtonStyle = (theme: Theme) => css({
   display: "flex",
   flexDirection: "column",
   fontWeight: "bold",
-  ...(flexGapReplacementStyle(30, false)),
+  gap: "30px",
   boxShadow: `${theme.boxShadow_tiles}`,
   background: `${theme.element_bg}`,
   placeSelf: "center",
@@ -460,7 +422,7 @@ export const videosStyle = (theme: Theme) => css(({
   marginTop: "24px",
   boxSizing: "border-box",
   padding: "10px",
-  ...(flexGapReplacementStyle(10, false)),
+  gap: "10px",
 }));
 
 export const backgroundBoxStyle = (theme: Theme) => css(({
@@ -469,5 +431,5 @@ export const backgroundBoxStyle = (theme: Theme) => css(({
   boxShadow: `${theme.boxShadow_tiles}`,
   boxSizing: "border-box",
   padding: "20px",
-  ...(flexGapReplacementStyle(25, false)),
+  gap: "25px",
 }));
diff --git a/src/main/Discard.tsx b/src/main/Discard.tsx
index 0a631cf27..168f59796 100644
--- a/src/main/Discard.tsx
+++ b/src/main/Discard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { css } from "@emotion/react";
-import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle } from "../cssStyles";
 
 import { LuChevronLeft, LuXCircle } from "react-icons/lu";
 
@@ -28,7 +28,7 @@ const Discard: React.FC = () => {
     display: finishState !== "Discard changes" ? "none" : "flex",
     flexDirection: "column" as const,
     alignItems: "center",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (
diff --git a/src/main/Error.tsx b/src/main/Error.tsx
index 1e4d16cd3..5c089a688 100644
--- a/src/main/Error.tsx
+++ b/src/main/Error.tsx
@@ -6,7 +6,6 @@ import { LuFrown } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
 import { selectErrorDetails, selectErrorIcon, selectErrorMessage, selectErrorTitle } from "../redux/errorSlice";
-import { flexGapReplacementStyle } from "../cssStyles";
 
 import { useTranslation } from "react-i18next";
 
@@ -36,7 +35,7 @@ const Error: React.FC = () => {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   return (
diff --git a/src/main/FinishMenu.tsx b/src/main/FinishMenu.tsx
index 7b8602666..e350e91be 100644
--- a/src/main/FinishMenu.tsx
+++ b/src/main/FinishMenu.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { css } from "@emotion/react";
-import { basicButtonStyle, flexGapReplacementStyle, tileButtonStyle } from "../cssStyles";
+import { basicButtonStyle, tileButtonStyle } from "../cssStyles";
 
 import { IconType } from "react-icons";
 import { LuSave, LuDatabase, LuXCircle } from "react-icons/lu";
@@ -22,7 +22,7 @@ const FinishMenu: React.FC = () => {
     flexDirection: "row",
     justifyContent: "center",
     flexWrap: "wrap",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (
diff --git a/src/main/Header.tsx b/src/main/Header.tsx
index 1250a62e2..c87811a9b 100644
--- a/src/main/Header.tsx
+++ b/src/main/Header.tsx
@@ -10,7 +10,7 @@ import { LuMoon, LuSun } from "react-icons/lu";
 import { HiOutlineTranslate } from "react-icons/hi";
 import { LuKeyboard } from "react-icons/lu";
 import { MainMenuStateNames } from "../types";
-import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle, BREAKPOINT_MEDIUM, BREAKPOINT_SMALL } from "../cssStyles";
 
 import LogoSvg from "../img/opencast-editor.svg?react";
 import { selectIsEnd } from "../redux/endSlice";
@@ -48,14 +48,14 @@ function Header() {
     height: "100%",
     alignItems: "center",
     paddingRight: "24px",
-    ...(flexGapReplacementStyle(16, false)),
+    gap: "16px",
   });
 
   const settingsButtonCSS = css({
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
-    ...(flexGapReplacementStyle(8, false)),
+    gap: "8px",
 
     fontSize: 16,
     fontFamily: "inherit",
@@ -215,7 +215,7 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
     const themeSelectorButtonStyle = css({
       display: "flex",
       alignItems: "center",
-      ...(flexGapReplacementStyle(8, false)),
+      gap: "8px",
 
       fontSize: 16,
       fontFamily: "inherit",
diff --git a/src/main/KeyboardControls.tsx b/src/main/KeyboardControls.tsx
index 8e577be9e..a807ef90d 100644
--- a/src/main/KeyboardControls.tsx
+++ b/src/main/KeyboardControls.tsx
@@ -4,7 +4,6 @@ import { ParseKeys } from "i18next";
 import React from "react";
 
 import { useTranslation, Trans } from "react-i18next";
-import { flexGapReplacementStyle } from "../cssStyles";
 import { getGroupName, KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTheme } from "../themes";
 import { titleStyle, titleStyleBold } from "../cssStyles";
@@ -52,7 +51,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
     justifyContent: "left",
     width: "100%",
     padding: "10px 0px",
-    ...(flexGapReplacementStyle(10, true)),
+    gap: "10px",
   });
 
   const labelStyle = css({
@@ -66,7 +65,7 @@ const Entry: React.FC<{ name: string, sequences: string[][]; }> = ({ name, seque
   const sequenceStyle = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(10, true)),
+    gap: "10px",
   });
 
   const singleKeyStyle = css({
@@ -121,7 +120,7 @@ const KeyboardControls: React.FC = () => {
     flexDirection: "row" as const,
     flexWrap: "wrap",
     justifyContent: "center",
-    ...(flexGapReplacementStyle(30, true)),
+    gap: "30px",
   });
 
   const render = () => {
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
index 878d1ab66..baa339778 100644
--- a/src/main/MainContent.tsx
+++ b/src/main/MainContent.tsx
@@ -14,7 +14,6 @@ import { useAppSelector } from "../redux/store";
 import { selectMainMenuState } from "../redux/mainMenuSlice";
 
 import { MainMenuStateNames } from "../types";
-import { flexGapReplacementStyle } from "../cssStyles";
 
 import { useBeforeunload } from "react-beforeunload";
 import { selectHasChanges as videoSelectHasChanges } from "../redux/videoSlice";
@@ -48,7 +47,7 @@ const MainContent: React.FC = () => {
     width: "100%",
     paddingRight: "20px",
     paddingLeft: "20px",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
     background: `${theme.background}`,
     overflow: "auto",
   });
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
index c51e8b8c7..dcbd193b2 100644
--- a/src/main/MainMenu.tsx
+++ b/src/main/MainMenu.tsx
@@ -13,7 +13,7 @@ import { setPageNumber } from "../redux/finishSlice";
 
 import { MainMenuStateNames } from "../types";
 import { settings } from "../config";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from "react-i18next";
@@ -42,7 +42,7 @@ const MainMenu: React.FC = () => {
     overflowX: "hidden",
     overflowY: "auto",
     background: `${theme.menu_background}`,
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (
diff --git a/src/main/Save.tsx b/src/main/Save.tsx
index fdefd4736..cc78e929b 100644
--- a/src/main/Save.tsx
+++ b/src/main/Save.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
 import {
   basicButtonStyle, backOrContinueStyle, ariaLive, errorBoxStyle,
-  navigationButtonStyle, flexGapReplacementStyle, spinningStyle,
+  navigationButtonStyle, spinningStyle,
 } from "../cssStyles";
 
 import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";
@@ -57,7 +57,7 @@ const Save: React.FC = () => {
     display: finishState !== "Save changes" ? "none" : "flex",
     flexDirection: "column" as const,
     alignItems: "center",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   const render = () => {
diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index b88c2e769..aa3be72d8 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { css } from "@emotion/react";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 import { LuChevronLeft, LuDownload, LuUpload } from "react-icons/lu";
 import {
   selectSubtitlesFromOpencastById,
@@ -98,14 +98,14 @@ const SubtitleEditor: React.FC = () => {
     justifyContent: "space-between",
     alignItems: "center",
     width: "100%",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     padding: "15px",
   });
 
   const topRightButtons = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   const subAreaStyle = css({
@@ -117,7 +117,7 @@ const SubtitleEditor: React.FC = () => {
     width: "100%",
     paddingTop: "10px",
     paddingBottom: "10px",
-    ...(flexGapReplacementStyle(30, true)),
+    gap: "30px",
     borderBottom: `${theme.menuBorder}`,
   });
 
diff --git a/src/main/SubtitleListEditor.tsx b/src/main/SubtitleListEditor.tsx
index ca94126b7..84caabb1c 100644
--- a/src/main/SubtitleListEditor.tsx
+++ b/src/main/SubtitleListEditor.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { shallowEqual } from "react-redux";
 import { useAppDispatch, useAppSelector } from "../redux/store";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 import { KEYMAP } from "../globalKeys";
 import {
   addCueAtIndex,
@@ -90,24 +90,9 @@ const SubtitleListEditor: React.FC = () => {
     flexDirection: "column",
     height: "100%",
     width: "60%",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
   });
 
-  // Old CSS for not yet implemented buttons
-  // const headerStyle = css({
-  //   display: "flex",
-  //   flexDirection: "row",
-  //   justifyContent: "flex-end",
-  //   flexWrap: "wrap",
-  //   ...(flexGapReplacementStyle(20, false)),
-  //   paddingRight: "20px",
-  // })
-
-  // const cuttingActionButtonStyle = {
-  //   padding: "16px",
-  //   boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
-  // };
-
   const calcEstimatedSize = React.useCallback(() => {
     return segmentHeight;
   }, []);
@@ -320,7 +305,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     flexDirection: "row",
     justifyContent: "space-around",
     alignItems: "center",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
     // Make function buttons visible when hovered or focused
     "&:hover": {
       "& .functionButtonAreaStyle": {
@@ -353,7 +338,7 @@ const SubtitleListSegment = React.memo((props: subtitleListSegmentProps) => {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     flexGrow: "0.5",
     minWidth: "20px",
     // Hackily moves buttons beyond the segment border.
diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx
index 71de6c67d..c415a8670 100644
--- a/src/main/SubtitleSelect.tsx
+++ b/src/main/SubtitleSelect.tsx
@@ -2,7 +2,6 @@ import React, { useEffect } from "react";
 import { css } from "@emotion/react";
 import {
   basicButtonStyle,
-  flexGapReplacementStyle,
   tileButtonStyle,
   disableButtonAnimation,
   subtitleSelectStyle,
@@ -103,7 +102,7 @@ const SubtitleSelect: React.FC = () => {
     flexDirection: "row",
     justifyContent: "center",
     flexWrap: "wrap",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   const renderButtons = () => {
@@ -250,7 +249,7 @@ const SubtitleAddButton: React.FC<{
   const subtitleAddFormStyle = css({
     display: !isPlusDisplay ? "flex" : "none",
     flexDirection: "column" as const,
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
     width: "80%",
     padding: "20px",
   });
diff --git a/src/main/SubtitleVideoArea.tsx b/src/main/SubtitleVideoArea.tsx
index 63c0ce010..91c333821 100644
--- a/src/main/SubtitleVideoArea.tsx
+++ b/src/main/SubtitleVideoArea.tsx
@@ -29,7 +29,6 @@ import {
 import { Flavor } from "../types";
 import { settings } from "../config";
 import { useTranslation } from "react-i18next";
-import { flexGapReplacementStyle } from "../cssStyles";
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { useTheme } from "../themes";
 import { VideoPlayer } from "./VideoPlayers";
@@ -109,8 +108,7 @@ const SubtitleVideoArea: React.FC = () => {
     justifyContent: "center",
     alignItems: "center",
     height: "100%",
-    // width: "40%",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   const render = () => {
diff --git a/src/main/TheEnd.tsx b/src/main/TheEnd.tsx
index e467aad37..a8ab3e204 100644
--- a/src/main/TheEnd.tsx
+++ b/src/main/TheEnd.tsx
@@ -6,7 +6,7 @@ import { LuCheckCircle, LuXCircle } from "react-icons/lu";
 
 import { useAppSelector } from "../redux/store";
 import { selectEndState } from "../redux/endSlice";
-import { basicButtonStyle, flexGapReplacementStyle, navigationButtonStyle } from "../cssStyles";
+import { basicButtonStyle, navigationButtonStyle } from "../cssStyles";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../themes";
@@ -39,13 +39,13 @@ const TheEnd: React.FC = () => {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
   });
 
   const restartOrBackStyle = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
   });
 
   return (
diff --git a/src/main/Thumbnail.tsx b/src/main/Thumbnail.tsx
index bd2b4d830..7d2d5c710 100644
--- a/src/main/Thumbnail.tsx
+++ b/src/main/Thumbnail.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { settings } from "../config";
 import {
-  basicButtonStyle, deactivatedButtonStyle, flexGapReplacementStyle, titleStyle, titleStyleBold, videosStyle,
+  basicButtonStyle, deactivatedButtonStyle, titleStyle, titleStyleBold, videosStyle,
   backgroundBoxStyle,
 } from "../cssStyles";
 import { Theme, useTheme } from "../themes";
@@ -179,7 +179,7 @@ const ThumbnailTable: React.FC<{
     width: "100%",
     flexDirection: "row",
     justifyContent: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     paddingBottom: "20px",
   });
 
@@ -643,7 +643,7 @@ const thumbnailTableRowTitleStyle = css({
 const thumbnailTableRowRowStyle = css({
   display: "flex",
   flexDirection: "row",
-  ...(flexGapReplacementStyle(20, true)),
+  gap: "20px",
 
   justifyContent: "space-around",
   flexWrap: "wrap",
diff --git a/src/main/TrackSelection.tsx b/src/main/TrackSelection.tsx
index 5151ac8bb..d26985f0c 100644
--- a/src/main/TrackSelection.tsx
+++ b/src/main/TrackSelection.tsx
@@ -14,7 +14,6 @@ import {
   basicButtonStyle,
   customIconStyle,
   deactivatedButtonStyle,
-  flexGapReplacementStyle,
   titleStyle,
   titleStyleBold,
 } from "../cssStyles";
@@ -50,7 +49,7 @@ const TrackSelection: React.FC = () => {
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
   });
 
   return (
@@ -98,7 +97,7 @@ const TrackItem: React.FC<{ track: Track, enabledCount: number; }> = ({ track, e
   const trackitemSubStyle = css({
     display: "flex",
     flexDirection: "row",
-    ...(flexGapReplacementStyle(20, true)),
+    gap: "20px",
 
     justifyContent: "space-around",
     flexWrap: "wrap",
diff --git a/src/main/VideoControls.tsx b/src/main/VideoControls.tsx
index 9ce2ecd60..c5c2c70ec 100644
--- a/src/main/VideoControls.tsx
+++ b/src/main/VideoControls.tsx
@@ -11,7 +11,7 @@ import {
 } from "../redux/videoSlice";
 
 import { convertMsToReadableString } from "../util/utilityFunctions";
-import { basicButtonStyle, flexGapReplacementStyle } from "../cssStyles";
+import { basicButtonStyle } from "../cssStyles";
 
 import { KEYMAP, rewriteKeys } from "../globalKeys";
 import { useTranslation } from "react-i18next";
@@ -67,7 +67,7 @@ const VideoControls: React.FC<{
     width: "100%",
     paddingTop: "10px",
     paddingBottom: "10px",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (
@@ -143,7 +143,7 @@ const PreviewMode: React.FC<{
   const previewModeStyle = css({
     cursor: "pointer",
     display: "flex",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
     justifyContent: "center",
     alignItems: "center",
   });
diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
index ffa2f7b7c..3f8668202 100644
--- a/src/main/VideoPlayers.tsx
+++ b/src/main/VideoPlayers.tsx
@@ -36,7 +36,7 @@ import { ActionCreatorWithPayload, AsyncThunk } from "@reduxjs/toolkit";
 
 import { useTheme } from "../themes";
 
-import { backgroundBoxStyle, flexGapReplacementStyle } from "../cssStyles";
+import { backgroundBoxStyle } from "../cssStyles";
 import { BaseReactPlayerProps } from "react-player/base";
 import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";
 
@@ -59,7 +59,7 @@ const VideoPlayers: React.FC<{
     justifyContent: "center",
     width: widthInPercent + "%",
     borderRadius: "5px",
-    ...(flexGapReplacementStyle(10, false)),
+    gap: "10px",
 
     maxHeight: maxHeightInPixel + "px",
   });
diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
index 40f3193d2..fabdbd4bd 100644
--- a/src/main/WorkflowConfiguration.tsx
+++ b/src/main/WorkflowConfiguration.tsx
@@ -5,7 +5,6 @@ import {
   basicButtonStyle,
   backOrContinueStyle,
   errorBoxStyle,
-  flexGapReplacementStyle,
   spinningStyle,
 } from "../cssStyles";
 
@@ -55,7 +54,7 @@ const WorkflowConfiguration: React.FC = () => {
     flexDirection: "column" as const,
     alignItems: "center",
     padding: "20px",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   return (
diff --git a/src/main/WorkflowSelection.tsx b/src/main/WorkflowSelection.tsx
index 229e528bf..19b773358 100644
--- a/src/main/WorkflowSelection.tsx
+++ b/src/main/WorkflowSelection.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
-import { backOrContinueStyle, errorBoxStyle, flexGapReplacementStyle } from "../cssStyles";
+import { backOrContinueStyle, errorBoxStyle } from "../cssStyles";
 
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import { selectWorkflows, setSelectedWorkflowIndex } from "../redux/videoSlice";
@@ -52,14 +52,14 @@ const WorkflowSelection: React.FC = () => {
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
-    ...(flexGapReplacementStyle(30, false)),
+    gap: "30px",
   });
 
   const workflowSelectionSelectionStyle = css({
     display: "flex",
     flexDirection: "column",
     alignItems: "left",
-    ...(flexGapReplacementStyle(20, false)),
+    gap: "20px",
     flexWrap: "wrap",
     maxHeight: "50vh",
   });
diff --git a/src/util/utilityFunctions.ts b/src/util/utilityFunctions.ts
index cf25a6ba9..7bb075953 100644
--- a/src/util/utilityFunctions.ts
+++ b/src/util/utilityFunctions.ts
@@ -39,43 +39,6 @@ export function safeJsonParse(str: string) {
   }
 }
 
-/**
- * Checks whether the css property gap for flexbox is supported by the browser.
- * Currently, this cannot be checked with "@support", so we use this workaround
- * instead.
- */
-let flexGapIsSupported: boolean | undefined;
-export function checkFlexGapSupport() {
-  // Use the cached value if it has been defined
-  if (flexGapIsSupported !== undefined) {
-    return flexGapIsSupported;
-  }
-
-  // Create a flex container with row-gap set
-  const flex = document.createElement("div");
-  flex.style.display = "flex";
-  flex.style.flexDirection = "column";
-  flex.style.rowGap = "1px";
-  flex.style.position = "absolute";
-
-  // Create two, elements inside it
-  flex.appendChild(document.createElement("div"));
-  flex.appendChild(document.createElement("div"));
-
-  // Append to the DOM (needed to obtain scrollHeight)
-  document.body.appendChild(flex);
-
-  // Flex container should be 1px high due to the row-gap
-  flexGapIsSupported = flex.scrollHeight === 1;
-
-  // Remove element from the DOM after you are done with it
-  if (flex.parentNode) {
-    flex.parentNode.removeChild(flex);
-  }
-
-  return flexGapIsSupported;
-}
-
 /**
  * Converts a working subtitle representation into a string
  */