Add static class names to UI elements for easier customization (#4421)

* Initial plan

* Add static class names to UI elements for easier customization

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Add unique DOM element IDs for easier customization targeting

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Remove duplicate class names, keep only IDs for UI element targeting

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Revert chat input field ID to original value

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Remove unnecessary nested spans and revert Button ID to original value

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Standardize ID names to follow owncast-{element-description}-{type} pattern

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -86,7 +86,9 @@ export const NameChangeModal: FC<NameChangeModalProps> = ({ closeModal }) => {
 
   return (
     <div>
-      Your chat display name is what people see when you send chat messages.
+      <div id="owncast-name-change-description-text">
+        Your chat display name is what people see when you send chat messages.
+      </div>
       <Form onSubmitCapture={handleNameChange} className={styles.form}>
         <Input.Search
           enterButton={saveButton}
@@ -114,8 +116,10 @@ export const NameChangeModal: FC<NameChangeModalProps> = ({ closeModal }) => {
           ))}
         </Select>
       </Form.Item>
-      You can also authenticate an IndieAuth or Fediverse account via the &quot;Authenticate&quot;
-      menu.
+      <div id="owncast-name-change-auth-info-text">
+        You can also authenticate an IndieAuth or Fediverse account via the &quot;Authenticate&quot;
+        menu.
+      </div>
     </div>
   );
 };