github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Discover] fix: set smaller max width for mobile devices (#199798) (#200202)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover] fix: set smaller max width for mobile devices
(#199798)](https://github.com/elastic/kibana/pull/199798)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Ania
Kowalska","email":"63072419+akowalska622@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-14T14:55:16Z","message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","v9.0.0","Team:DataDiscovery","Feature:Unified
search","backport:prev-minor"],"title":"[Discover] fix: set smaller max
width for mobile
devices","number":199798,"url":"https://github.com/elastic/kibana/pull/199798","mergeCommit":{"message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199798","number":199798,"mergeCommit":{"message":"[Discover]
fix: set smaller max width for mobile devices
(#199798)","sha":"fbd06a347f2d6b4c312848723ecdf490bfbf8feb"}}]}]
BACKPORT-->

Co-authored-by: Ania Kowalska <63072419+akowalska622@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-11-15 03:40:05 +11:00 • committed by GitHub
parent 416e27dcfc
commit db10db938a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/plugins/unified_search/public/dataview_picker/change_dataview.styles.ts
View file

@ -12,15 +12,18 @@ import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count'
import { DataViewListItemEnhanced } from './dataview_list';
const MIN_WIDTH = 300;
const MAX_MOBILE_WIDTH = 350;
export const changeDataViewStyles = ({
fullWidth,
dataViewsList,
theme,
isMobile,
}: {
fullWidth?: boolean;
dataViewsList: DataViewListItemEnhanced[];
theme: EuiThemeComputed;
isMobile: boolean;
}) => {
return {
trigger: {
@ -30,7 +33,10 @@ export const changeDataViewStyles = ({
borderBottomLeftRadius: 0,
},
popoverContent: {
width: calculateWidthFromEntries(dataViewsList, ['name', 'id'], { minWidth: MIN_WIDTH }),
width: calculateWidthFromEntries(dataViewsList, ['name', 'id'], {
minWidth: MIN_WIDTH,
...(isMobile && { maxWidth: MAX_MOBILE_WIDTH }),
}),
},
};
};

4
src/plugins/unified_search/public/dataview_picker/change_dataview.tsx
View file

@ -17,6 +17,7 @@ import {
EuiContextMenuItem,
useEuiTheme,
useGeneratedHtmlId,
useIsWithinBreakpoints,
EuiIcon,
EuiText,
EuiContextMenuPanelProps,
@ -68,10 +69,13 @@ export function ChangeDataView({
const kibana = useKibana<IUnifiedSearchPluginServices>();
const { application, data, dataViews, dataViewEditor } = kibana.services;
const isMobile = useIsWithinBreakpoints(['xs']);
const styles = changeDataViewStyles({
fullWidth: trigger.fullWidth,
dataViewsList,
theme: euiTheme,
isMobile,
});
// Create a reusable id to ensure search input is the first focused item in the popover even though it's not the first item