style(http-proxy): fix margin for responsive design (#1194)

This commit is contained in:
Fallenbagel
2024-12-30 05:09:23 +08:00
committed by GitHub
parent b6e2e6ce61
commit 5fc4ae57c0

View File

@@ -563,11 +563,13 @@ const SettingsMain = () => {
</div> </div>
{values.proxyEnabled && ( {values.proxyEnabled && (
<> <>
<div className="mr-2 ml-4">
<div className="form-row"> <div className="form-row">
<label htmlFor="proxyHostname" className="checkbox-label"> <label
<span className="mr-2 ml-4"> htmlFor="proxyHostname"
className="checkbox-label"
>
{intl.formatMessage(messages.proxyHostname)} {intl.formatMessage(messages.proxyHostname)}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
@@ -580,19 +582,23 @@ const SettingsMain = () => {
{errors.proxyHostname && {errors.proxyHostname &&
touched.proxyHostname && touched.proxyHostname &&
typeof errors.proxyHostname === 'string' && ( typeof errors.proxyHostname === 'string' && (
<div className="error">{errors.proxyHostname}</div> <div className="error">
{errors.proxyHostname}
</div>
)} )}
</div> </div>
</div> </div>
<div className="form-row"> <div className="form-row">
<label htmlFor="proxyPort" className="checkbox-label"> <label htmlFor="proxyPort" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyPort)} {intl.formatMessage(messages.proxyPort)}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="proxyPort" name="proxyPort" type="text" /> <Field
id="proxyPort"
name="proxyPort"
type="text"
/>
</div> </div>
{errors.proxyPort && {errors.proxyPort &&
touched.proxyPort && touched.proxyPort &&
@@ -603,9 +609,7 @@ const SettingsMain = () => {
</div> </div>
<div className="form-row"> <div className="form-row">
<label htmlFor="proxySsl" className="checkbox-label"> <label htmlFor="proxySsl" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxySsl)} {intl.formatMessage(messages.proxySsl)}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<Field <Field
@@ -620,13 +624,15 @@ const SettingsMain = () => {
</div> </div>
<div className="form-row"> <div className="form-row">
<label htmlFor="proxyUser" className="checkbox-label"> <label htmlFor="proxyUser" className="checkbox-label">
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyUser)} {intl.formatMessage(messages.proxyUser)}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
<Field id="proxyUser" name="proxyUser" type="text" /> <Field
id="proxyUser"
name="proxyUser"
type="text"
/>
</div> </div>
{errors.proxyUser && {errors.proxyUser &&
touched.proxyUser && touched.proxyUser &&
@@ -636,10 +642,11 @@ const SettingsMain = () => {
</div> </div>
</div> </div>
<div className="form-row"> <div className="form-row">
<label htmlFor="proxyPassword" className="checkbox-label"> <label
<span className="mr-2 ml-4"> htmlFor="proxyPassword"
className="checkbox-label"
>
{intl.formatMessage(messages.proxyPassword)} {intl.formatMessage(messages.proxyPassword)}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<div className="form-input-field"> <div className="form-input-field">
@@ -652,7 +659,9 @@ const SettingsMain = () => {
{errors.proxyPassword && {errors.proxyPassword &&
touched.proxyPassword && touched.proxyPassword &&
typeof errors.proxyPassword === 'string' && ( typeof errors.proxyPassword === 'string' && (
<div className="error">{errors.proxyPassword}</div> <div className="error">
{errors.proxyPassword}
</div>
)} )}
</div> </div>
</div> </div>
@@ -661,10 +670,8 @@ const SettingsMain = () => {
htmlFor="proxyBypassFilter" htmlFor="proxyBypassFilter"
className="checkbox-label" className="checkbox-label"
> >
<span className="mr-2 ml-4">
{intl.formatMessage(messages.proxyBypassFilter)} {intl.formatMessage(messages.proxyBypassFilter)}
</span> <span className="label-tip">
<span className="label-tip ml-4">
{intl.formatMessage(messages.proxyBypassFilterTip)} {intl.formatMessage(messages.proxyBypassFilterTip)}
</span> </span>
</label> </label>
@@ -690,11 +697,9 @@ const SettingsMain = () => {
htmlFor="proxyBypassLocalAddresses" htmlFor="proxyBypassLocalAddresses"
className="checkbox-label" className="checkbox-label"
> >
<span className="mr-2 ml-4">
{intl.formatMessage( {intl.formatMessage(
messages.proxyBypassLocalAddresses messages.proxyBypassLocalAddresses
)} )}
</span>
</label> </label>
<div className="form-input-area"> <div className="form-input-area">
<Field <Field
@@ -710,6 +715,7 @@ const SettingsMain = () => {
/> />
</div> </div>
</div> </div>
</div>
</> </>
)} )}
</Form> </Form>