=== Problem to solve
1. The Interaction Timeline is a stand-alone tool, but stands to gain improved credibility and ease-of-use if it follows established Wikimedia branding and UX patternsThe top complaint/comment from users on both Meta and English Wikipedia is that there is a lot of whitespace and not enough data is shown on the same page at the same time.
2. By using standard Wikipedia components, we can optimize information densityThe Interaction Timeline is a productivity tool. Users are commenting that there is too much We should increase the usefulness of it by decreasing excess whitespace between elementsand increasing information density.
----
=== Acceptance criteria
* The Interaction Timeline should use Wikimedia [[https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr |OOjs]] components and/or [[https://github.com/wikimedia/wikimedia-ui-base|CSS]] styles and/or [[https://github.com/wikimedia/oojs-ui/tree/master/src/themes/wikimediaui|UITheme]] for:wiki and DateRange should be on the same horizontal line
** Username input box The text-size and line-height should be akin to what is on [[https://en.wikipedia.org/wiki/Wikipedia:Community_health_initiative_on_English_Wikipedia/Interaction_Timeline|a standard wiki page]]
** Wiki dropdown* The "time between" boxes should take less space
** Font and text size** Potentially remove the border of the box
** Icons (useravatar, calendar, clock, and alert for error messages in T180083)** Potentially decrease the padding and font size
** Loading indicator (to** Potentially don't make it it's own horizontal line. There can be built in T180072)horizontal overlap with the edit cards.
** Alert dialog (to be built in T180083)* The 'Edit cards' should take up less space
*** The 'Edit box' (aside: we really need a better, unique name forre should be no whitespace on the sides of these) page
** Should use standard padding and margins for the boxes (e.g. remove all whitespace on the sides)
** Should span a larger percentage of the screen
* We also need to reduce the size of the "time between" boxes (e.g. This may mean removing the box surroundinge whitespace on the text.sides)
----
=== Notes
* Optimize for standard laptop displays and large desktop monitors (1366x768,. 1920x1080)
* Date range selector is blocked by T91148The two most common sizes:
**1366x768**
{F10852478}
**1920x1080**
{F10852484}
(It's probably uncommon for someone to use this tool on a screen this size at fullscreen, but there's still room for improvement!)