jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support multi-line wrapping for long queries / small screens

Browse Source 
Reviewed By: antonk52

Differential Revision: D51497340

fbshipit-source-id: 23bcc9a69c3e59e17ee9505c954c955f2a1c9e5f
This commit is contained in:
Andrey Goncharov
2023-11-21 07:56:19 -08:00
committed by Facebook GitHub Bot
parent 7e2508f045
commit 877253191d
3 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
View File

@@ -12,10 +12,11 @@ import {css} from '@emotion/css';
import {theme} from '../theme'; import {theme} from '../theme';
const containerStyle = css` const containerStyle = css`
flex: 1 0 auto; flex: 1 1 auto;
background-color: ${theme.backgroundDefault}; background-color: ${theme.backgroundDefault};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
border-radius: ${theme.borderRadius}; border-radius: ${theme.borderRadius};
border: 1px solid ${theme.borderColor}; border: 1px solid ${theme.borderColor};
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

2
desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
View File

@@ -129,7 +129,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
return ( return (
<PowerSearchContainer> <PowerSearchContainer>
<Space size={[theme.space.tiny, 0]}> <Space size={[theme.space.tiny, 0]} wrap>
<SearchOutlined <SearchOutlined
style={{ style={{
marginLeft: theme.space.tiny, marginLeft: theme.space.tiny,

2
desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
View File

@@ -891,7 +891,7 @@ export function DataTable<T extends object>(
<Layout.Container> <Layout.Container>
{props.actionsTop ? <Searchbar gap>{props.actionsTop}</Searchbar> : null} {props.actionsTop ? <Searchbar gap>{props.actionsTop}</Searchbar> : null}
{props.enableSearchbar && ( {props.enableSearchbar && (
<Searchbar gap> <Searchbar grow shrink gap>
<PowerSearch <PowerSearch
config={powerSearchConfig} config={powerSearchConfig}
searchExpression={searchExpression} searchExpression={searchExpression}