React - Make the Officer Page Mobile-Responsive

• With the current "Officer" component finally created for desktop, this task is important to ensure that this React component is mobile-responsive. Ideally, we need to support all devices, not just on the desktop/laptop, as web developers.
• As a baseline, please configure the styling of your React component to support not just the desktop/laptop devices but also common phone devices - 1 Apple and 1 Android (e.g. please support for this task: the I-Phone SE and Samsung Galaxy S8+).
• You may be asking, how can we verify this? To visually test this, on Google Chrome, please right click on Windows (or two-finger click on Mac), click "Inspect", go to the top left of the Google Chrome developer tools menu and select the Laptop-Phone Icon, and change the Dimensions to each of these devices, respectively, to test out your designs.
• Once the UI design looks solid, then you have completed with this task and no longer need to modify the React component styling further.
• Have questions? Please ask either Andrew or Pierre on Discord or at our TA office hours sessions at TORG 1070.

Start by locating the existing Officer React component and its styling. Use Chrome DevTools device emulation to inspect the page at the iPhone SE and Samsung Galaxy S8+ dimensions, then verify that the Officer page layout remains usable on both devices. Done means the component is visually responsive on those phone sizes as well as desktop.