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/chat/ChatTextField/ChatTextField.tsx

@@ -283,6 +283,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
               <button
                 type="button"
                 aria-label="Emoji picker"
+                id="owncast-emoji-picker-button"
                 className={styles.emojiButton}
                 title="Emoji picker button"
               >
@@ -292,6 +293,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
             <button
               type="button"
               aria-label="Send message"
+              id="owncast-send-message-button"
               className={styles.sendButton}
               title="Send message Button"
               onClick={sendMessage}