Ultra-compact mode ui bug fixes #2576

Src/WitsmlExplorer.Frontend/components/Breadcrumbs.tsx

@@ -155,7 +155,7 @@ export function Breadcrumbs() {
         color="inherit"
         aria-label="breadcrumb"
         wrap={false}
-        isCompact={theme === UserTheme.Compact}
+        $isCompact={theme === UserTheme.Compact}
       >
         {breadcrumbContent.map((breadCrumb, index: number) => (
           <EdsBreadcrumbs.Breadcrumb
@@ -400,13 +400,20 @@ const StyledNavLink = styled(NavLink)`
   text-decoration: none;
 `;
 
-const StyledBreadcrumbs = styled(EdsBreadcrumbs)<{ isCompact: boolean }>`
-  padding-top: 0.2em;
-  height: 1.5rem;
+const StyledBreadcrumbs = styled(EdsBreadcrumbs)<{ $isCompact: boolean }>`
   overflow: clip;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: fit-content;
+
+  li > span {
+    display: inline-flex;
+    line-height: 16px;
+  }
 
-  ${({ isCompact }) =>
-    !isCompact
+  ${({ $isCompact }) =>
+    !$isCompact
       ? ""
       : css`
           li > span {

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryDataGrid.tsx

@@ -362,9 +362,11 @@ const getExpandedRowsFromQuery = (
 const StyledTextField = styled(TextField)`
   display: flex;
   align-items: center;
+
   div {
     background-color: transparent;
   }
+
   width: 100%;
   height: 100%;
 `;

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/QueryView.tsx

@@ -57,7 +57,7 @@ const QueryView = (): React.ReactElement => {
         activeTab={tabIndex}
         onChange={onTabChange}
         scrollable
-        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
+        style={{ whiteSpace: "nowrap" }}
       >
         <Tabs.List>
           {queries.map((query) => (
@@ -86,13 +86,14 @@ const QueryView = (): React.ReactElement => {
         <Box
           display="grid"
           gridTemplateRows="auto 1fr auto"
-          gap="1rem"
+          gap="0.5rem"
           height="100%"
           pr="2px"
         >
           <QueryOptions
             onQueryChange={onQueryChange}
             onChangeEditorType={setEditorType}
+            editorType={editorType}
           />
           {editorType === QueryEditorTypes.DataGrid ? (
             <QueryDataGrid />

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/DataGridSwitch.tsx

@@ -0,0 +1,40 @@
+import React, { ChangeEventHandler, FC } from "react";
+import { Stack } from "@mui/material";
+import { Switch } from "@equinor/eds-core-react";
+import { useOperationState } from "../../../../../../hooks/useOperationState.tsx";
+import { UserTheme } from "../../../../../../contexts/operationStateReducer.tsx";
+import styled from "styled-components";
+import { Colors } from "../../../../../../styles/Colors.tsx";
+
+type DataGridSwitchProps = {
+  onClick: ChangeEventHandler<HTMLInputElement>;
+  dataGridActive: boolean;
+};
+
+const DataGridSwitch: FC<DataGridSwitchProps> = ({
+  onClick,
+  dataGridActive
+}) => {
+  const { theme, colors } = useOperationState().operationState;
+  const isCompact = theme === UserTheme.Compact;
+
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="flex-start">
+      <StyledSwitch
+        checked={dataGridActive}
+        onChange={onClick}
+        size={isCompact ? "small" : "default"}
+        label="Use data grid view"
+        colors={colors}
+      />
+    </Stack>
+  );
+};
+
+const StyledSwitch = styled(Switch)<{ colors: Colors }>`
+  & > span:nth-child(2) {
+    color: ${({ colors }) => colors.interactive.primaryResting};
+  }
+`;
+
+export default DataGridSwitch;

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/DataGridSwitch/index.ts

@@ -0,0 +1 @@
+export { default } from "./DataGridSwitch.tsx";

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/QueryOptions.tsx

@@ -1,7 +1,6 @@
-import { Switch, TextField, Typography } from "@equinor/eds-core-react";
+import { TextField } from "@equinor/eds-core-react";
 import { Box, Stack } from "@mui/material";
-import { CommonPanelContainer } from "components/StyledComponents/Container.tsx";
-import { ChangeEvent, FC, useContext, useState } from "react";
+import React, { ChangeEvent, FC, useContext, useState } from "react";
 import styled, { css } from "styled-components";
 import { DispatchOperation } from "../../../../../contexts/operationStateReducer.tsx";
 import OperationType from "../../../../../contexts/operationType.ts";
@@ -23,6 +22,7 @@ import {
   StoreFunction
 } from "../../../QueryViewUtils.tsx";
 import TemplatePicker from "./TemplatePicker";
+import DataGridSwitch from "./DataGridSwitch";
 
 export enum QueryEditorTypes {
   AceEditor = "AceEditor",
@@ -32,10 +32,12 @@ export enum QueryEditorTypes {
 type QueryOptionsProps = {
   onQueryChange: (newValue: string) => void;
   onChangeEditorType: (type: QueryEditorTypes) => void;
+  editorType: QueryEditorTypes;
 };
 
 const QueryOptions: FC<QueryOptionsProps> = ({
   onQueryChange,
+  editorType,
   onChangeEditorType
 }) => {
   const {
@@ -147,19 +149,6 @@ const QueryOptions: FC<QueryOptionsProps> = ({
           gap="0.5rem"
           direction="row"
         >
-          <CommonPanelContainer>
-            <Switch
-              onChange={(event) =>
-                onChangeEditorType(
-                  event.target.checked
-                    ? QueryEditorTypes.DataGrid
-                    : QueryEditorTypes.AceEditor
-                )
-              }
-              size="small"
-            />
-            <Typography>Data Grid</Typography>
-          </CommonPanelContainer>
           <TemplatePicker
             dispatchQuery={dispatchQuery}
             returnElements={returnElements}
@@ -170,7 +159,6 @@ const QueryOptions: FC<QueryOptionsProps> = ({
           </Button>
         </Stack>
       </Stack>
-
       {(storeFunction === StoreFunction.GetFromStore ||
         storeFunction === StoreFunction.DeleteFromStore) && (
         <Box height="fit-content" pt="1rem">
@@ -211,6 +199,18 @@ const QueryOptions: FC<QueryOptionsProps> = ({
           </Box>
         </Box>
       )}
+      <Stack direction="row" justifyContent="flex-end" mt="0.5rem">
+        <DataGridSwitch
+          dataGridActive={editorType === QueryEditorTypes.DataGrid}
+          onClick={(event) =>
+            onChangeEditorType(
+              event.target.checked
+                ? QueryEditorTypes.DataGrid
+                : QueryEditorTypes.AceEditor
+            )
+          }
+        />
+      </Stack>
     </Box>
   );
 };

Src/WitsmlExplorer.Frontend/components/ContentViews/QueryView/components/QueryOptions/TemplatePicker/TemplatePicker.tsx

@@ -46,6 +46,7 @@ const TemplatePicker: FC<TemplatePickerProps> = ({
         aria-controls="menu-default"
         color="secondary"
         onClick={() => setIsTemplateMenuOpen(!isTemplateMenuOpen)}
+        style={{ whiteSpace: "nowrap" }}
       >
         <Icon name="style" />
         Pick template

Src/WitsmlExplorer.Frontend/components/Modals/ModalDialog.tsx

@@ -3,11 +3,12 @@ import { Button } from "components/StyledComponents/Button";
 import OperationType from "contexts/operationType";
 import { useOperationState } from "hooks/useOperationState";
 import React, { ReactElement, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Colors, dark, light } from "styles/Colors";
 import Icons from "styles/Icons";
 import { ErrorMessage } from "../StyledComponents/ErrorMessage";
 import { ModalContentLayout } from "../StyledComponents/ModalContentLayout";
+import { UserTheme } from "../../contexts/operationStateReducer.tsx";
 
 interface ModalDialogProps {
   heading: string;
@@ -55,6 +56,7 @@ const ModalDialog = (props: ModalDialogProps): React.ReactElement => {
     useState<boolean>(false);
   const { operationState } = context;
   const colors: Colors = operationState?.colors || light;
+  const isCompact = context.operationState.theme === UserTheme.Compact;
   const confirmButtonIsDisabled = isLoading || confirmDisabled;
 
   const onCancel =
@@ -75,7 +77,7 @@ const ModalDialog = (props: ModalDialogProps): React.ReactElement => {
   const buttons = [
     showConfirmButton ? (
       isLoading ? (
-        <StyledButton style={{ cursor: "not-allowed" }}>
+        <StyledButton style={{ cursor: "not-allowed" }} isCompact={isCompact}>
           <Progress.Dots />
         </StyledButton>
       ) : (
@@ -231,6 +233,7 @@ const Content = styled(Dialog.CustomContent)<{
     svg {
       fill: ${(props) => props.colors.text.staticIconsDefault};
     }
+
     label {
       color: ${(props) => props.colors.text.staticIconsDefault};
     }
@@ -275,11 +278,20 @@ const DialogHeader = styled(Dialog.Header)<{ colors: Colors }>`
   }
 `;
 
-const StyledButton = styled(Button)<{ align?: string }>`
+const StyledButton = styled(Button)<{ align?: string; isCompact?: boolean }>`
   &&& {
     ${({ align }) =>
       align === "right" ? `margin-left: auto;` : "margin: 0.5em;"};
   }
+
+  ${({ isCompact }) =>
+    !isCompact
+      ? ""
+      : css`
+          & > span > svg {
+            height: 10px !important;
+          }
+        `}
 `;
 
 export default ModalDialog;

Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter/SearchFilter.tsx

@@ -151,7 +151,7 @@ const SearchFilter = (): ReactElement => {
               size="small"
               label={`Search ${pluralize(selectedOption)}`}
               onKeyDown={handleEnterPress}
-              isCompact={isCompact}
+              $isCompact={isCompact}
               InputProps={{
                 startAdornment: (
                   <StartAdornment
@@ -187,13 +187,13 @@ const SearchFilter = (): ReactElement => {
   );
 };
 
-const SearchField = styled(TextField)<{ colors: Colors; isCompact: boolean }>`
+const SearchField = styled(TextField)<{ colors: Colors; $isCompact: boolean }>`
   &&& > div > fieldset {
     border-color: ${({ colors }) => colors.interactive.primaryResting};
   }
 
-  ${({ isCompact }) =>
-    !isCompact
+  ${({ $isCompact }) =>
+    !$isCompact
       ? ""
       : css`
           .${inputLabelClasses.root} {
@@ -205,8 +205,6 @@ const SearchField = styled(TextField)<{ colors: Colors; isCompact: boolean }>`
             font-size: 0.9rem;
           }
         `}
-}
-
 `;
 
 const SearchBarContainer = styled.div`

Src/WitsmlExplorer.Frontend/components/StyledComponents/StyledMenu/StyledMenu.tsx

@@ -16,7 +16,9 @@ const StyledMenu: FC<MenuProps> = (props) => {
   const sizeVariant: SizeVariant =
     theme === UserTheme.Compact ? UserTheme.Compact : "default";
 
-  return <RawStyledMenu {...props} colors={colors} sizeVariant={sizeVariant} />;
+  return (
+    <RawStyledMenu {...props} colors={colors} $sizeVariant={sizeVariant} />
+  );
 };
 
 export default StyledMenu;
@@ -44,9 +46,9 @@ const sizes: {
 
 const RawStyledMenu = styled(MuiMenu)<{
   colors: Colors;
-  sizeVariant: SizeVariant;
+  $sizeVariant: SizeVariant;
 }>`
-  ${({ colors, sizeVariant }) => {
+  ${({ colors, $sizeVariant }) => {
     const { infographic, ui, interactive } = colors;
     return css`
       .${paperClasses.root} {
@@ -61,16 +63,16 @@ const RawStyledMenu = styled(MuiMenu)<{
         }
 
         .${buttonBaseClasses.root}.${menuItemClasses.root} {
-          margin: ${sizes[sizeVariant].buttonBaseMargin};
+          margin: ${sizes[$sizeVariant].buttonBaseMargin};
 
           &,
           p {
-            font-size: ${sizes[sizeVariant].menuItemFontSize};
+            font-size: ${sizes[$sizeVariant].menuItemFontSize};
           }
 
           svg {
-            height: ${sizes[sizeVariant].menuItemIconSize};
-            width: ${sizes[sizeVariant].menuItemIconSize};
+            height: ${sizes[$sizeVariant].menuItemIconSize};
+            width: ${sizes[$sizeVariant].menuItemIconSize};
           }
 
           &:hover {