simplify db strategy editor markup (#42986)

* simplify strategy editor markup

* make it work for OSS too 

frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.styled.tsx

-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { color } from "metabase/lib/colors";
 
-export const Panel = styled.section<{ verticallyOverflows?: boolean }>`
+export const Panel = styled.section<{ hasLeftBorder?: boolean }>`
   overflow-y: auto;
-  display: flex;
-  flex-flow: column nowrap;
   background-color: ${color("white")};
-  border-style: solid;
-  border-color: ${color("border")};
-  border-block-width: 2px;
-  border-inline-end-width: 1px;
-  border-inline-start-width: 0;
-  :first-child {
-    border-inline-start-width: 2px;
-    border-start-start-radius: 1rem;
-    border-end-start-radius: 1rem;
-  }
-  :last-child {
-    border-inline-end-width: 2px;
-    ${props =>
-      !props.verticallyOverflows &&
-      css`
-        border-start-end-radius: 1rem;
-        border-end-end-radius: 1rem;
-      `}
-  }
+  height: 100%;
+
+  ${props =>
+    props.hasLeftBorder && `border-left: 1px solid ${color("border")};`}
+`;
+
+export const RoundedBox = styled.div<{ twoColumns?: boolean }>`
+  margin-bottom: 1rem;
+  width: 100%;
+
+  display: grid;
+  grid-template-columns: minmax(5rem, 30rem) ${props =>
+      props.twoColumns ? "minmax(5rem, auto)" : ""};
+  max-width: ${props => (props.twoColumns ? "100%" : "30rem")};
+
+  overflow: hidden;
+
+  border-radius: 1rem;
+  border: 2px solid ${color("border")};
 `;
 
 export const TabWrapper = styled.div`

frontend/src/metabase/admin/performance/components/StrategyEditorForDatabases.tsx

@@ -7,18 +7,21 @@ import { findWhere } from "underscore";
 import { useListDatabasesQuery } from "metabase/api";
 import { DelayedLoadingAndErrorWrapper } from "metabase/components/LoadingAndErrorWrapper/DelayedLoadingAndErrorWrapper";
 import { PLUGIN_CACHING } from "metabase/plugins";
-import { Box, Stack } from "metabase/ui";
+import { Stack } from "metabase/ui";
 import type { CacheableModel } from "metabase-types/api";
 import { DurationUnit } from "metabase-types/api";
 
 import { useCacheConfigs } from "../hooks/useCacheConfigs";
 import { useConfirmIfFormIsDirty } from "../hooks/useConfirmIfFormIsDirty";
 import { useSaveStrategy } from "../hooks/useSaveStrategy";
-import { useVerticallyOverflows } from "../hooks/useVerticallyOverflows";
 import type { UpdateTargetId } from "../strategies";
 import { rootId } from "../strategies";
 
-import { Panel, TabWrapper } from "./StrategyEditorForDatabases.styled";
+import {
+  Panel,
+  TabWrapper,
+  RoundedBox,
+} from "./StrategyEditorForDatabases.styled";
 import { StrategyForm } from "./StrategyForm";
 
 const StrategyEditorForDatabases_Base = ({
@@ -92,11 +95,6 @@ const StrategyEditorForDatabases_Base = ({
 
   const targetDatabase = databases.find(db => db.id === targetId);
 
-  const {
-    verticallyOverflows: formPanelVerticallyOverflows,
-    ref: formPanelRef,
-  } = useVerticallyOverflows();
-
   const shouldAllowInvalidation = useMemo(() => {
     if (
       targetId === null ||
@@ -136,16 +134,7 @@ const StrategyEditorForDatabases_Base = ({
         </aside>
       </Stack>
       {confirmationModal}
-      <Box
-        style={{
-          display: "grid",
-          gridTemplateColumns: "minmax(5rem, 30rem) minmax(5rem, auto)",
-          overflow: "hidden",
-        }}
-        w="100%"
-        mx="0"
-        mb="1rem"
-      >
+      <RoundedBox twoColumns={canOverrideRootStrategy}>
         {canOverrideRootStrategy && (
           <PLUGIN_CACHING.StrategyFormLauncherPanel
             configs={configs}
@@ -157,10 +146,7 @@ const StrategyEditorForDatabases_Base = ({
             shouldShowResetButton={shouldShowResetButton}
           />
         )}
-        <Panel
-          ref={formPanelRef}
-          verticallyOverflows={formPanelVerticallyOverflows}
-        >
+        <Panel hasLeftBorder={canOverrideRootStrategy}>
           {targetId !== null && (
             <StrategyForm
               targetId={targetId}
@@ -175,7 +161,7 @@ const StrategyEditorForDatabases_Base = ({
             />
           )}
         </Panel>
-      </Box>
+      </RoundedBox>
     </TabWrapper>
   );
 };

frontend/src/metabase/admin/performance/hooks/useVerticallyOverflows.tsx

-import { useLayoutEffect, useRef, useState } from "react";
-
-export const useVerticallyOverflows = () => {
-  const [verticallyOverflows, setVerticallyOverflows] = useState(false);
-  const ref = useRef<HTMLElement>(null);
-  const el = ref.current;
-  useLayoutEffect(() => {
-    if (el) {
-      setVerticallyOverflows(el.scrollHeight > el.clientHeight);
-    }
-  }, [el?.scrollHeight, el?.clientHeight, el, setVerticallyOverflows]);
-  return { verticallyOverflows, ref };
-};