looks promising

Author: akucharska

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.scss

@@ -6,7 +6,7 @@
   flex-grow: 1;
 }
 
-@media (max-width: 1040px) {
+@container (max-width: 1040px) {
   .command-palette-search-bar {
     width: 100% !important;
   }

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.tsx

@@ -1,12 +1,12 @@
 import { useEffect, RefObject, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
+import { useRecoilValue } from 'recoil';
 import { Icon, Input } from '@ui5/webcomponents-react';
 import { K8sResource } from 'types';
 import { useEventListener } from 'hooks/useEventListener';
 import { useObjectState } from 'shared/useObjectState';
 import { CommandPaletteUI } from './CommandPaletteUI';
-import { useRecoilValue } from 'recoil';
 import { availableNodesSelector } from 'state/navigation/availableNodesSelector';
 import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
@@ -103,6 +103,8 @@ export function CommandPaletteSearchBar({
     }
   }, [shellbarRef?.current, shellbarWidth, shouldShowDialog]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const htmlWrapEl = document.getElementById('html-wrap');
+
   return (
     <>
       <Input
@@ -126,8 +128,9 @@ export function CommandPaletteSearchBar({
             }}
             resourceCache={resourceCache}
             updateResourceCache={updateResourceCache}
+            shellbarWidth={shellbarWidth}
           />,
-          document.body,
+          htmlWrapEl || document.body,
         )}
     </>
   );

src/command-pallette/CommandPalletteUI/CommandPaletteUI.scss

@@ -1,5 +1,5 @@
 .command-palette-ui {
-  position: fixed;
+  position: absolute;
   top: calc(var(--_ui5-v2-7-0_shellbar_root_height) + 0.5rem);
   width: 100%;
   height: 100%;
@@ -14,8 +14,8 @@
     display: flex;
     width: 60vw;
     max-width: 700px;
-    position: fixed;
-    top: 0.5rem;
+    position: absolute;
+    top: calc(var(--_ui5-v2-7-0_shellbar_root_height) * -1);
     opacity: 0%; //prevent visually jumping
   }
 
@@ -43,12 +43,11 @@
   }
 }
 
-@media (max-width: 1040px) {
-  .command-palette-ui {
+.command-palette-ui {
+  @media (max-width: 1040px) {
     &__wrapper {
-      width: 100vw;
+      width: 100%;
       max-width: unset;
-      top: 0;
       height: 100%;
       opacity: 100%;
     }
@@ -70,3 +69,28 @@
     }
   }
 }
+
+.command-palette-ui {
+  &__wrapper.full-size {
+    width: 100%;
+    max-width: unset;
+    height: 100%;
+    opacity: 100%;
+
+    .input-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .search-with-display-more {
+        margin-right: 2.5rem;
+      }
+
+      .input-back-button {
+        display: block;
+        padding: 0 0.25rem;
+        box-sizing: content-box;
+      }
+    }
+  }
+}

src/command-pallette/CommandPalletteUI/CommandPaletteUI.tsx

@@ -16,6 +16,7 @@ import { Button, Icon, Input } from '@ui5/webcomponents-react';
 import './CommandPaletteUI.scss';
 import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
+import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
 
@@ -46,13 +47,15 @@ type CommandPaletteProps = {
   hide: () => void;
   resourceCache: Record<string, K8sResource[]>;
   updateResourceCache: (key: string, resources: K8sResource[]) => void;
+  shellbarWidth: number;
 };
 
 export function CommandPaletteUI({
   showCommandPalette,
   hide,
   resourceCache,
   updateResourceCache,
+  shellbarWidth,
 }: CommandPaletteProps) {
   const namespace = useRecoilValue(activeNamespaceIdState);
   const [isResourceEdited, setIsResourceEdited] = useRecoilState(
@@ -69,6 +72,7 @@ export function CommandPaletteUI({
   const [activeResultIndex, setActiveResultIndex] = useState(0);
   const [isHistoryMode, setHistoryMode] = useState(false);
   const [historyIndex, setHistoryIndex] = useState(0);
+  const showCompanion = useRecoilValue(showKymaCompanionState);
 
   const commandPaletteRef = useRef<HTMLDivElement | null>(null);
 
@@ -110,18 +114,19 @@ export function CommandPaletteUI({
 
     //position Command Palette
     if (
-      window.innerWidth > SCREEN_SIZE_BREAKPOINT_M &&
+      shellbarWidth > SCREEN_SIZE_BREAKPOINT_M &&
       headerInput &&
       paletteCurrent
     ) {
       const shellbarRect = headerInput.getBoundingClientRect();
-      paletteCurrent.style.right = `${window.innerWidth -
-        shellbarRect.right}px`;
+      paletteCurrent.style.right = `${shellbarWidth - shellbarRect.right}px`;
+      paletteCurrent.style.left = 'unset';
       paletteCurrent.style.opacity = '100%'; //prevent visually jumping
     } else if (paletteCurrent) {
       paletteCurrent.style.right = '0px';
+      paletteCurrent.style.left = '0px';
     }
-  }, [showCommandPalette, window.innerWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [showCommandPalette, shellbarWidth, showCommandPalette]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const commandPaletteInput = document.getElementById('command-palette-search');
 
@@ -233,11 +238,14 @@ export function CommandPaletteUI({
     },
     [isHistoryMode, activeResultIndex, query, results],
   );
-
   return (
     <Background hide={hide}>
       <div
-        className="command-palette-ui__wrapper"
+        className={`command-palette-ui__wrapper ${
+          showCompanion.show && shellbarWidth < SCREEN_SIZE_BREAKPOINT_M
+            ? 'full-size'
+            : ''
+        }`}
         role="dialog"
         ref={commandPaletteRef}
       >