IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 15:45:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

SearchV2: Fix search input width on mobile (#49850)

Browse Source 
* SearchV2: Fix search input on mobile
This commit is contained in:
Maria Alexandra 2022-05-30 18:46:23 +02:00 committed by GitHub
parent 70980fbb44
commit 855655cc9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/search/components/ManageDashboardsNew.tsx
View File

@ -1,4 +1,4 @@
import { css } from '@emotion/css';
import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { useDebounce } from 'react-use';
@ -38,8 +38,8 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
return (
<>
<div className="page-action-bar">
<div className="gf-form gf-form--grow m-r-2">
<div className={cx(styles.actionBar, 'page-action-bar')}>
<div className={cx(styles.inputWrapper, 'gf-form gf-form--grow m-r-2')}>
<Input
value={inputValue}
onChange={onSearchQueryChange}
@ -68,6 +68,16 @@ ManageDashboardsNew.displayName = 'ManageDashboardsNew';
export default ManageDashboardsNew;
const getStyles = (theme: GrafanaTheme2) => ({
actionBar: css`
${theme.breakpoints.down('sm')} {
flex-wrap: wrap;
}
`,
inputWrapper: css`
${theme.breakpoints.down('sm')} {
margin-right: 0 !important;
}
`,
searchInput: css`
margin-bottom: 6px;
min-height: ${theme.spacing(4)};