Add some minor touchups around the Unified Doc Viewer push flyout

lukasolson · Apr 10, 2024 · 1de9a94 · 1de9a94
1 parent 8b3d9f8
commit 1de9a94
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout.tsx
@@ -25,6 +25,7 @@ import {
   keys,
   EuiButtonEmpty,
   useEuiTheme,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import type { Filter, Query, AggregateQuery } from '@kbn/es-query';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -82,7 +83,7 @@ export function DiscoverGridFlyout({
   const services = useDiscoverServices();
   const flyoutCustomization = useDiscoverCustomization('flyout');
   const { euiTheme } = useEuiTheme();
-
+  const isXlScreen = useIsWithinMinBreakpoint('xl');
   const defaultWidth = flyoutCustomization?.size ?? 540; // Give enough room to search bar to not wrap
   const [flyoutWidth, setFlyoutWidth] = useLocalStorage(FLYOUT_WIDTH_KEY, defaultWidth);
   const minWidth = euiTheme.base * 24;
@@ -230,6 +231,9 @@ export function DiscoverGridFlyout({
         minWidth={minWidth}
         maxWidth={maxWidth}
         onResize={setFlyoutWidth}
+        css={{
+          maxWidth: `${isXlScreen ? `calc(100vw - ${defaultWidth}px)` : '90vw'} !important`,
+        }}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup
@@ -274,15 +278,11 @@ export function DiscoverGridFlyout({
         </EuiFlyoutHeader>
         <EuiFlyoutBody>{bodyContent}</EuiFlyoutBody>
         <EuiFlyoutFooter>
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
-                {i18n.translate('discover.grid.flyout.close', {
-                  defaultMessage: 'Close',
-                })}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+            {i18n.translate('discover.grid.flyout.close', {
+              defaultMessage: 'Close',
+            })}
+          </EuiButtonEmpty>
         </EuiFlyoutFooter>
       </EuiFlyoutResizable>
     </EuiPortal>

diff --git a/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx b/src/plugins/discover/public/components/discover_grid_flyout/discover_grid_flyout_actions.tsx
@@ -41,15 +41,13 @@ export function DiscoverGridFlyoutActions({ flyoutActions }: DiscoverGridFlyoutA
   const isMobileScreen = useIsWithinBreakpoints(['xs', 's']);
   const isLargeScreen = dimensions?.width ? dimensions.width > euiTheme.base * 30 : false;
   return (
-    <EuiFlexGroup ref={setRef}>
-      <EuiFlexItem>
-        <FlyoutActions
-          flyoutActions={flyoutActions}
-          isMobileScreen={isMobileScreen}
-          isLargeScreen={isLargeScreen}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <div ref={setRef}>
+      <FlyoutActions
+        flyoutActions={flyoutActions}
+        isMobileScreen={isMobileScreen}
+        isLargeScreen={isLargeScreen}
+      />
+    </div>
   );
 }