PR comments

elastic · Nov 15, 2023 · 1a54fe4 · 1a54fe4
1 parent 189a5b1
commit 1a54fe4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx b/packages/kbn-expandable-flyout/src/components/preview_section.test.tsx
@@ -79,10 +79,6 @@ describe('PreviewSection', () => {
     expect(getByTestId(`${PREVIEW_SECTION_TEST_ID}BannerPanel`)).toHaveClass(
       `euiPanel--${banner.backgroundColor}`
     );
-    // expect(getByTestId(`${PREVIEW_SECTION_TEST_ID}BannerText`)).toHaveProperty(
-    //   'style',
-    //   `color: ${banner.textColor}`
-    // );
     expect(getByTestId(`${PREVIEW_SECTION_TEST_ID}BannerText`)).toHaveStyle(
       `color: ${banner.textColor}`
     );

diff --git a/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.ts b/packages/kbn-expandable-flyout/src/hooks/use_sections_sizes.ts
@@ -63,42 +63,46 @@ export const useSectionSizes = ({
   showLeft,
   showPreview,
 }: UserSectionsSizesParams): UserSectionsSizesResult => {
-  // the right section's width will grow from 380px (at 992px resolution) to 750px (at 1920px resolution)
-  let rightSectionWidth: number = showRight
-    ? windowWidth < MIN_RESOLUTION_BREAKPOINT
-      ? RIGHT_SECTION_MIN_WIDTH
-      : RIGHT_SECTION_MIN_WIDTH +
+  let rightSectionWidth: number = 0;
+  if (showRight) {
+    if (windowWidth < MIN_RESOLUTION_BREAKPOINT) {
+      // the right section's width will grow from 380px (at 992px resolution) while handling tiny screens by not going smaller than the window width
+      rightSectionWidth = Math.min(RIGHT_SECTION_MIN_WIDTH, windowWidth);
+    } else {
+      const ratioWidth =
         (RIGHT_SECTION_MAX_WIDTH - RIGHT_SECTION_MIN_WIDTH) *
-          ((windowWidth - MIN_RESOLUTION_BREAKPOINT) /
-            (MAX_RESOLUTION_BREAKPOINT - MIN_RESOLUTION_BREAKPOINT))
-    : 0;
+        ((windowWidth - MIN_RESOLUTION_BREAKPOINT) /
+          (MAX_RESOLUTION_BREAKPOINT - MIN_RESOLUTION_BREAKPOINT));
 
-  // handle tiny screens by not going smaller than the window width
-  if (rightSectionWidth > windowWidth) rightSectionWidth = windowWidth;
+      // the right section's width will grow to 750px (at 1920px resolution) and will never go bigger than 750px in higher resolutions
+      rightSectionWidth = Math.min(RIGHT_SECTION_MIN_WIDTH + ratioWidth, RIGHT_SECTION_MAX_WIDTH);
+    }
+  }
 
-  // never go bigger than 750px
-  if (rightSectionWidth > RIGHT_SECTION_MAX_WIDTH) rightSectionWidth = RIGHT_SECTION_MAX_WIDTH;
-
-  // the left section's width will be nearly the remaining space for resolution lower than 1600px, and 80% of the remaining space for resolution higher than 1600px
-  let leftSectionWidth: number = showLeft
-    ? windowWidth <= FULL_WIDTH_BREAKPOINT
-      ? windowWidth - rightSectionWidth - FULL_WIDTH_PADDING
-      : ((windowWidth - rightSectionWidth) * 80) / 100
-    : 0;
-
-  // never go bigger than 1500px
-  if (leftSectionWidth > LEFT_SECTION_MAX_WIDTH) leftSectionWidth = LEFT_SECTION_MAX_WIDTH;
+  let leftSectionWidth: number = 0;
+  if (showLeft) {
+    // the left section's width will be nearly the remaining space for resolution lower than 1600px
+    if (windowWidth <= FULL_WIDTH_BREAKPOINT) {
+      leftSectionWidth = windowWidth - rightSectionWidth - FULL_WIDTH_PADDING;
+    } else {
+      // the left section's width will be taking 80% of the remaining space for resolution higher than 1600px, while never going bigger than 1500px
+      leftSectionWidth = Math.min(
+        ((windowWidth - rightSectionWidth) * 80) / 100,
+        LEFT_SECTION_MAX_WIDTH
+      );
+    }
+  }
 
   const flyoutWidth: string =
     showRight && showLeft ? `${rightSectionWidth + leftSectionWidth}px` : `${rightSectionWidth}px`;
 
-  // preview section's width should only be similar to the right section
-  const previewSectionLeft: number =
-    showPreview && showLeft
-      ? windowWidth <= MAX_RESOLUTION_BREAKPOINT
-        ? windowWidth - rightSectionWidth - FULL_WIDTH_PADDING
-        : ((windowWidth - rightSectionWidth) * 80) / 100
-      : 0;
+  // preview section's width should only be similar to the right section.
+  // Though because the preview is rendered with an absolute position in the flyout, we calculate its left position instead of the width
+  let previewSectionLeft: number = 0;
+  if (showPreview) {
+    // the preview section starts where the left section ends
+    previewSectionLeft = leftSectionWidth;
+  }
 
   return {
     rightSectionWidth,