External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use native browser styling for flag select

Browse Source 
Match 4chan's unstyled flag dropdown by excluding it from themed form select rules.
This commit is contained in:
Tommaso Casaburi
2026-05-24 23:30:59 +07:00
parent 639c627a04
commit 2030b8c5bb
4 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-form/post-form.module.css
+2 -6
View File
@@ -69,7 +69,7 @@
position: relative;
}
.postFormTable input[type="text"], .postFormTable textarea, .postFormTable select {
.postFormTable input[type="text"], .postFormTable textarea, .postFormTable select:not(.flagSelector) {
border: var(--post-form-field-input-border, revert);
font-family: var(--post-form-field-font-family, revert);
appearance: var(--post-form-field-input-appearance, revert);
@@ -80,7 +80,7 @@
font-size: 10pt;
}
.postFormTable input[type="text"]:focus, .postFormTable textarea:focus, .postFormTable select:focus {
.postFormTable input[type="text"]:focus, .postFormTable textarea:focus, .postFormTable select:not(.flagSelector):focus {
border: var(--post-form-field-input-focus-border, revert);
}
@@ -113,10 +113,6 @@
width: 190px !important;
}
.flagSelect {
width: 254px;
}
.spoilerButton input[type="checkbox"] {
margin: 0 3px;
vertical-align: middle;
src/components/post-form/post-form.tsx
+2 -1
View File
@@ -305,8 +305,9 @@ const PostFormFields = ({
<td>
<select
key={flagOptions.map((option) => option.value).join('|')}
name='flag'
aria-label={t('flag')}
className={styles.flagSelect}
className={styles.flagSelector}
ref={flagRef}
defaultValue={flagOptions[0]?.value}
>
src/components/reply-modal/reply-modal.module.css
+3 -3
View File
@@ -39,7 +39,7 @@
background-image: var(--close-button-background-image);
}
.container input[type="text"], .container textarea, .container select {
.container input[type="text"], .container textarea, .container select:not(.flagSelector) {
border: var(--reply-modal-field-input-border, revert);
font-family: var(--post-form-field-font-family, revert);
appearance: var(--post-form-field-input-appearance, revert);
@@ -53,7 +53,7 @@
margin-bottom: 1px;
}
.container input[type="text"]:focus, .container textarea:focus, .container select:focus {
.container input[type="text"]:focus, .container textarea:focus, .container select:not(.flagSelector):focus {
border: var(--reply-modal-field-input-border-focus, revert);
}
@@ -139,7 +139,7 @@
cursor: default;
}
.container input[type="text"], .container textarea, .container select {
.container input[type="text"], .container textarea, .container select:not(.flagSelector) {
font-size: 16px;
}
}
src/components/reply-modal/reply-modal.tsx
+8 -1
View File
@@ -522,7 +522,14 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
</div>
{flagOptions.length > 0 && (
<div>
<select key={flagOptions.map((option) => option.value).join('|')} aria-label={t('flag')} ref={flagRef} defaultValue={flagOptions[0]?.value}>
<select
key={flagOptions.map((option) => option.value).join('|')}
name='flag'
aria-label={t('flag')}
className={styles.flagSelector}
ref={flagRef}
defaultValue={flagOptions[0]?.value}
>
{flagOptions.map((option) => (
<option key={option.value} value={option.value}>
{option.label}