1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

docs: fix styling issues on narrow screens

This commit is contained in:
Thomas Heartman 2022-03-01 08:44:57 +01:00
parent e12aa94695
commit 553b8020fd
4 changed files with 27 additions and 25 deletions

View File

@ -11,6 +11,9 @@ const Template = (args) => <FeedbackWrapper {...args} />;
export const Step1 = Template.bind({});
Step1.args = {
open: true,
seedData: {
currentStep: 1,
},
};
export const Step2 = Template.bind({});

View File

@ -360,7 +360,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
</div>
<div className={styles['button-container']}>
<button type="submit">Submit feedback</button>
<button type="submit">Submit</button>
<button
className={styles['button-secondary']}
type="button"

View File

@ -30,6 +30,7 @@
.user-feedback fieldset {
border: none;
margin: 0;
padding: 0;
width: 100%;
}
@ -41,15 +42,12 @@
.user-feedback button {
border: none;
border-radius: var(--ifm-global-radius);
padding: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal);
padding: var(--ifm-spacing-vertical) calc(var(--ifm-spacing-horizontal) / 2);
}
.user-feedback form {
/* max-width: 850px; */
width: 100%;
margin-left: auto;
margin-right: auto;
transition: var(--fade-in-transition);
/* width: 100%; */
}
.user-feedback form > * + * {
@ -238,4 +236,5 @@ button.close-button {
.form-section-container > * {
grid-column: 1;
grid-row: 1;
transition: var(--fade-in-transition);
}

View File

@ -1,32 +1,32 @@
.wrapper {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
svg {
display: inline-block;
vertical-align: top;
display: inline-block;
vertical-align: top;
}
h1 {
font-weight: 900;
font-size: 20px;
line-height: 1;
margin: 6px 0 6px 10px;
display: inline-block;
vertical-align: top;
font-weight: 900;
font-size: 20px;
line-height: 1;
margin: 6px 0 6px 10px;
display: inline-block;
vertical-align: top;
}
button + button {
margin-left: 10px;
.wrapper button + button {
margin-left: 10px;
}
.welcome {
color: #333;
font-size: 14px;
margin-right: 10px;
color: #333;
font-size: 14px;
margin-right: 10px;
}