Make interface mobile responsive (#2273)

This commit is contained in:
Rihan 2020-09-13 18:02:25 +01:00 committed by GitHub
parent 9a21584c42
commit 9a4c0d8ba7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 130 additions and 69 deletions

View file

@ -55,7 +55,7 @@ const StartupContainer = () => {
</p>
</div>
</TitledGreyBox>
<div css={tw`grid gap-8 grid-cols-2 mt-10`}>
<div css={tw`grid gap-8 md:grid-cols-2 mt-10`}>
{data.variables.map(variable => <VariableBox key={variable.envVariable} variable={variable}/>)}
</div>
</ServerContentBlock>

View file

@ -47,13 +47,13 @@ const VariableBox = ({ variable }: Props) => {
title={
<p css={tw`text-sm uppercase`}>
{!variable.isEditable &&
<span css={tw`bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2`}>Read Only</span>
<span css={tw`bg-neutral-700 text-xs py-1 px-2 rounded-full mr-2 mb-1`}>Read Only</span>
}
{variable.name}
</p>
}
>
<FlashMessageRender byKey={FLASH_KEY} css={tw`mb-4`}/>
<FlashMessageRender byKey={FLASH_KEY} css={tw`mb-2 md:mb-4`}/>
<InputSpinner visible={loading}>
<Input
onKeyUp={e => {