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

Match 4chan's unstyled flag dropdown by excluding it from themed form select rules.

src/components/post-form/post-form.module.css

@@ -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

@@ -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

@@ -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

@@ -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}