VictoriaMetrics · valyala · Dec 3, 2025 · Dec 3, 2025
diff --git a/app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsChart.tsx b/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]}

diff --git a/app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsPlot/BarHitsPlot.tsx b/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}

diff --git a/app/vmui/packages/vmui/src/components/Chart/BarHitsChart/style.scss b/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;
+      }
     }
   }
 }
diff --git a/app/vmui/packages/vmui/src/components/Configurators/LogsSettings/LogParsingSwitches.tsx b/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.

diff --git a/app/vmui/packages/vmui/src/components/Main/Button/style.scss b/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;
     }
   }

diff --git a/app/vmui/packages/vmui/src/components/Main/Pagination/SelectLimit/SelectLimit.tsx b/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>

diff --git a/app/vmui/packages/vmui/src/components/Main/Pagination/style.scss b/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;

diff --git a/app/vmui/packages/vmui/src/components/QueryHistory/QueryHistory.tsx b/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 && (

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogs.tsx b/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

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFieldRow.tsx b/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"}>

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx b/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsFields.tsx
@@ -4,13 +4,16 @@ import "./style.scss";
 import classNames from "classnames";
 import GroupLogsFieldRow from "./GroupLogsFieldRow";
 import { useLocalStorageBoolean } from "../../../hooks/useLocalStorageBoolean";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 interface Props {
   log: Logs;
   hideGroupButton?: boolean;
 }
 
 const GroupLogsFields: FC<Props> = ({ log, hideGroupButton }) => {
+  const { isMobile } = useDeviceDetect();
+
   const sortedFields = useMemo(() => {
     return Object.entries(log)
       .sort(([aKey], [bKey]) => aKey.localeCompare(bKey));
@@ -22,6 +25,7 @@ const GroupLogsFields: FC<Props> = ({ log, hideGroupButton }) => {
     <div
       className={classNames({
         "vm-group-logs-row-fields": true,
+        "vm-group-logs-row-fields_mobile": isMobile,
         "vm-group-logs-row-fields_interactive": !disabledHovers
       })}
     >

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsHeader.tsx b/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsHeader.tsx
@@ -8,13 +8,15 @@ import useBoolean from "../../../hooks/useBoolean";
 import GroupLogsHeaderItem from "./GroupLogsHeaderItem";
 import { LOGS_GROUP_BY, LOGS_URL_PARAMS, WITHOUT_GROUPING } from "../../../constants/logs";
 import { GroupLogsType } from "../../../types";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 interface Props {
   group: GroupLogsType;
   index: number;
 }
 
 const GroupLogsHeader: FC<Props> = ({ group, index }) => {
+  const { isMobile } = useDeviceDetect();
   const { isDarkTheme } = useAppState();
   const [searchParams] = useSearchParams();
 
@@ -30,7 +32,7 @@ const GroupLogsHeader: FC<Props> = ({ group, index }) => {
   const [hideParisCount, setHideParisCount] = useState<number>(0);
 
   const groupBy = searchParams.get(LOGS_URL_PARAMS.GROUP_BY) || LOGS_GROUP_BY;
-  const compactGroupHeader = searchParams.get(LOGS_URL_PARAMS.COMPACT_GROUP_HEADER) === "true";
+  const compactGroupHeader = isMobile || searchParams.get(LOGS_URL_PARAMS.COMPACT_GROUP_HEADER) === "true";
 
   const pairs = group.pairs;
   const hideAboveIndex = pairs.length - hideParisCount - 1;

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsItem.tsx b/app/vmui/packages/vmui/src/components/Views/GroupView/GroupLogsItem.tsx
@@ -18,6 +18,7 @@ import useCopyToClipboard from "../../../hooks/useCopyToClipboard";
 import StreamContextButton from "../../../pages/StreamContext/StreamContextButton";
 import { useAppState } from "../../../state/common/StateContext";
 import { formatDateWithNanoseconds } from "../../../utils/time";
+import useDeviceDetect from "../../../hooks/useDeviceDetect";
 
 interface Props {
   log: Logs;
@@ -30,6 +31,7 @@ interface Props {
 
 const GroupLogsItem: FC<Props> = ({ log, displayFields = [], isContextView, hideGroupButton, className, onItemClick }) => {
   const { isDarkTheme } = useAppState();
+  const { isMobile } = useDeviceDetect();
 
   const {
     value: isOpenFields,
@@ -119,6 +121,7 @@ const GroupLogsItem: FC<Props> = ({ log, displayFields = [], isContextView, hide
       <div
         className={classNames({
           "vm-group-logs-row-content": true,
+          "vm-group-logs-row-content_mobile": isMobile,
           "vm-group-logs-row-content_dark": isDarkTheme,
           "vm-group-logs-row-content_active": isOpenFields,
           "vm-group-logs-row-content_interactive": !disabledHovers,

diff --git a/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss b/app/vmui/packages/vmui/src/components/Views/GroupView/style.scss
@@ -13,6 +13,7 @@ $actions-width: calc(($actions-buttons*30px) + 10px);
 
   &-header {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
 
@@ -143,6 +144,12 @@ $actions-width: calc(($actions-buttons*30px) + 10px);
       padding: 2px $actions-width 2px 2px;
       cursor: pointer;
 
+      &_mobile {
+        flex-wrap: wrap;
+        gap: $padding-small;
+        border-bottom: $border-divider;
+      }
+
       &_active {
         padding-right: 0;
       }
@@ -318,6 +325,12 @@ $actions-width: calc(($actions-buttons*30px) + 10px);
       font-size: $font-size-logs;
       font-variant-numeric: tabular-nums;
 
+      &_mobile {
+        height: auto;
+        margin: $padding-small 0;
+        padding: calc($padding-small / 2);
+      }
+
       &_interactive &-item {
         contain: layout;
         will-change: background-color;
@@ -328,6 +341,37 @@ $actions-width: calc(($actions-buttons*30px) + 10px);
       }
 
       &-item {
+        &_mobile {
+          max-width: calc(100vw - ($padding-global * 4));
+          display: flex;
+          flex-wrap: wrap;
+          gap: calc($padding-small / 2);
+          align-items: flex-start;
+          justify-content: flex-start;
+          border-bottom: $border-divider;
+        }
+
+        &_mobile &__key {
+          flex-grow: 1;
+          color: $color-text-secondary;
+          max-width: calc(100% - 100px);
+          order: 1;
+        }
+
+        &_mobile &-controls {
+          flex-grow: 1;
+          order: 2;
+        }
+
+        &_mobile &__value {
+          order: 3;
+        }
+
+        &_mobile &-controls__wrapper {
+          width: 100%;
+          justify-content: flex-end;
+        }
+
         &-controls {
           padding: 0 calc($padding-small / 2);
 
@@ -353,7 +397,6 @@ $actions-width: calc(($actions-buttons*30px) + 10px);
 
         &__key {
           overflow-wrap: break-word;
-          width: max-content;
         }
 
         &__value {

diff --git a/app/vmui/packages/vmui/src/layouts/Footer/Footer.tsx b/app/vmui/packages/vmui/src/layouts/Footer/Footer.tsx
@@ -38,10 +38,8 @@ const Footer: FC<Props> = memo(({ links = footerLinksToLogs }) => {
         {title}
       </a>
     ))}
-    <div className="vm-footer__copyright">
-      &copy; {copyrightYears} VictoriaMetrics.
-      {version && <span className="vm-footer__version">&nbsp;Version: {version}</span>}
-    </div>
+    <div className="vm-footer__copyright">&copy; {copyrightYears} VictoriaMetrics.</div>
+    {version && <span className="vm-footer__version">&nbsp;Version: {version}</span>}
   </footer>;
 });
 

diff --git a/app/vmui/packages/vmui/src/layouts/Footer/style.scss b/app/vmui/packages/vmui/src/layouts/Footer/style.scss
@@ -37,6 +37,7 @@
     grid-template-columns: 14px auto;
   }
 
+  &__version,
   &__copyright {
     text-align: right;
     flex-grow: 1;