app/vmui: adjust styles for mobile layout (#855)

Author: Loori-R

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsChart.tsx

@@ -16,6 +16,7 @@ import { useFetchFieldNames } from "../../../pages/OverviewPage/hooks/useFetchFi
 import { useTimeState } from "../../../state/time/TimeStateContext";
 import { useExtraFilters } from "../../../pages/OverviewPage/hooks/useExtraFilters";
 import { getDurationFromMilliseconds } from "../../../utils/time";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 interface Props {
   logHits: LogHits[];
@@ -28,6 +29,8 @@ interface Props {
 }
 
 const BarHitsChart: FC<Props> = ({ logHits, data: _data, query, period, setPeriod, onApplyFilter, durationMs }) => {
+  const { isMobile } = useDeviceDetect();
+
   const [graphOptions, setGraphOptions] = useState<GraphOptions>({
     graphStyle: GRAPH_STYLES.BAR,
     stacked: false,
@@ -58,7 +61,12 @@ const BarHitsChart: FC<Props> = ({ logHits, data: _data, query, period, setPerio
       })}
     >
       <div className="vm-bar-hits-chart-header">
-        <div className="vm-bar-hits-chart-header-info">
+        <div
+          className={classNames({
+          "vm-bar-hits-chart-header-info": true,
+          "vm-bar-hits-chart-header-info_mobile": isMobile,
+        })}
+        >
           <SelectLimit
             label="Top hits"
             options={[5, 10, 25, 50]}

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsPlot/BarHitsPlot.tsx

@@ -17,6 +17,7 @@ import { sortLogHits } from "../../../../utils/logs";
 import { useAppState } from "../../../../state/common/StateContext";
 import { useTimeState } from "../../../../state/time/TimeStateContext";
 import { ExtraFilter } from "../../../../pages/OverviewPage/FiltersBar/types";
+import useDeviceDetect from "../../../../hooks/useDeviceDetect";
 
 interface Props {
   logHits: LogHits[];
@@ -29,6 +30,7 @@ interface Props {
 }
 
 const BarHitsPlot: FC<Props> = ({ graphOptions, logHits, totalHits, data: _data, period, setPeriod, onApplyFilter }: Props) => {
+  const { isMobile } = useDeviceDetect();
   const { isDarkTheme } = useAppState();
   const { timezone } = useTimeState();
   const [containerRef, containerSize] = useElementSize();
@@ -135,11 +137,13 @@ const BarHitsPlot: FC<Props> = ({ graphOptions, logHits, totalHits, data: _data,
           className="vm-line-chart__u-plot"
           ref={uPlotRef}
         />
-        <BarHitsTooltip
-          uPlotInst={uPlotInst}
-          data={_data}
-          focusDataIdx={focusDataIdx}
-        />
+        {!isMobile && (
+          <BarHitsTooltip
+            uPlotInst={uPlotInst}
+            data={_data}
+            focusDataIdx={focusDataIdx}
+          />
+        )}
       </div>
       {uPlotInst && <BarHitsLegend
         uPlotInst={uPlotInst}

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/style.scss

@@ -22,6 +22,7 @@
 
   &-header {
     display: flex;
+    flex-wrap: wrap;
     align-content: center;
     justify-content: space-between;
     gap: $padding-small;
@@ -34,6 +35,10 @@
       color: $color-text-secondary;
       font-size: $font-size-small;
       font-family: monospace;
+
+      &_mobile {
+        flex-wrap: wrap;
+      }
     }
   }
 }

app/vmui/packages/vmui/src/components/Configurators/LogsSettings/LogParsingSwitches.tsx

@@ -1,10 +1,8 @@
 import { FC } from "preact/compat";
 import Switch from "../../Main/Switch/Switch";
-import useDeviceDetect from "../../../hooks/useDeviceDetect";
 import { useLogsDispatch, useLogsState } from "../../../state/logsPanel/LogsStateContext";
 
 const LogParsingSwitches: FC = () => {
-  const { isMobile } = useDeviceDetect();
   const { markdownParsing, ansiParsing } = useLogsState();
   const dispatch = useLogsDispatch();
 
@@ -31,7 +29,6 @@ const LogParsingSwitches: FC = () => {
           label={"Enable markdown parsing"}
           value={markdownParsing}
           onChange={handleChangeMarkdownParsing}
-          fullWidth={isMobile}
         />
         <div className="vm-group-logs-configurator-item__info">
           Toggle this switch to enable or disable the Markdown formatting for log entries.
@@ -43,7 +40,6 @@ const LogParsingSwitches: FC = () => {
           label={"Enable ANSI parsing"}
           value={ansiParsing}
           onChange={handleChangeAnsiParsing}
-          fullWidth={isMobile}
         />
         <div className="vm-group-logs-configurator-item__info">
           Toggle this switch to enable or disable ANSI escape sequence parsing for log entries.

app/vmui/packages/vmui/src/components/Main/Button/style.scss

@@ -42,6 +42,8 @@ $button-radius: 6px;
 
     svg {
       width: 14px;
+      min-width: 14px;
+      max-width: 14px;
     }
   }
 
@@ -51,6 +53,8 @@ $button-radius: 6px;
 
     svg {
       width: 16px;
+      min-width: 16px;
+      max-width: 16px;
     }
   }
 
@@ -60,6 +64,8 @@ $button-radius: 6px;
 
     svg {
       width: 18px;
+      min-width: 18px;
+      max-width: 18px;
       line-height: 16px;
     }
   }

app/vmui/packages/vmui/src/components/Main/Pagination/SelectLimit/SelectLimit.tsx

@@ -81,7 +81,7 @@ export const SelectLimit = <T extends string | number>(props: SelectLimitProps<T
         ref={buttonRef}
       >
         <div>
-          {label || "Rows per page"}: <b>{renderOptionLabel ? renderOptionLabel(limit, true) : limit || "All"}</b>
+          {label || (isMobile ? "Rows" : "Rows per page")}: <b>{renderOptionLabel ? renderOptionLabel(limit, true) : limit || "All"}</b>
         </div>
         <ArrowDropDownIcon/>
       </div>

app/vmui/packages/vmui/src/components/Main/Pagination/style.scss

@@ -4,6 +4,7 @@
   position: sticky;
   left: 0;
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: $padding-small;
   padding: $padding-global 0;

app/vmui/packages/vmui/src/components/QueryHistory/QueryHistory.tsx

@@ -113,7 +113,7 @@ const QueryHistory: FC<Props> = ({ handleSelectQuery, historyKey }) => {
         startIcon={<ClockIcon/>}
         ariaLabel={"Query history"}
       >
-        Query history
+        {!isMobile && "Query history"}
       </Button>
 
       {openModal && (

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogs.tsx

@@ -140,7 +140,10 @@ const GroupLogs: FC<Props> = ({ logs, settingsRef }) => {
       {settingsRef.current && createPortal((
         <div className="vm-group-logs-header">
           <div className="vm-query-page-body-header__log-info">
-            Total groups: <b>{groupData.length}</b>
+            {isMobile ? "Logs" : "Total logs returned"}: <b>{logs.length}</b>
+          </div>
+          <div className="vm-query-page-body-header__log-info">
+            {isMobile ? "Groups" : "Total groups"}: <b>{groupData.length}</b>
           </div>
           <SelectLimit
             allowUnlimited

app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRow.tsx

@@ -5,6 +5,8 @@ import { CopyIcon, StorageIcon, VisibilityIcon } from "../../Main/Icons";
 import useCopyToClipboard from "../../../hooks/useCopyToClipboard";
 import { useSearchParams } from "react-router-dom";
 import { LOGS_GROUP_BY, LOGS_URL_PARAMS } from "../../../constants/logs";
+import classNames from "classnames";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 interface Props {
   field: string;
@@ -13,6 +15,7 @@ interface Props {
 }
 
 const GroupLogsFieldRow: FC<Props> = ({ field, value, hideGroupButton }) => {
+  const { isMobile } = useDeviceDetect();
   const copyToClipboard = useCopyToClipboard();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -54,7 +57,12 @@ const GroupLogsFieldRow: FC<Props> = ({ field, value, hideGroupButton }) => {
   }, [copied]);
 
   return (
-    <tr className="vm-group-logs-row-fields-item">
+    <tr
+      className={classNames({
+      "vm-group-logs-row-fields-item": true,
+      "vm-group-logs-row-fields-item_mobile": isMobile
+    })}
+    >
       <td className="vm-group-logs-row-fields-item-controls">
         <div className="vm-group-logs-row-fields-item-controls__wrapper">
           <Tooltip title={copied ? "Copied" : "Copy to clipboard"}>