diff --git a/web/modals/threads/color-selector.css b/web/modals/threads/color-selector.css --- a/web/modals/threads/color-selector.css +++ b/web/modals/threads/color-selector.css @@ -1,14 +1,11 @@ div.container { - display: flex; - flex-direction: column; - width: 100%; -} - -div.row { display: flex; flex-direction: row; + flex-wrap: wrap; align-items: center; - justify-content: space-between; + justify-content: center; + column-gap: 12px; + row-gap: 6px; width: 100%; padding: 6px 0; } diff --git a/web/modals/threads/color-selector.react.js b/web/modals/threads/color-selector.react.js --- a/web/modals/threads/color-selector.react.js +++ b/web/modals/threads/color-selector.react.js @@ -16,60 +16,56 @@ return ( <div className={css.container}> - <div className={css.row}> - <ColorSelectorButton - color={selectedThreadColors[0]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[1]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[2]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[3]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[4]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - </div> - <div className={css.row}> - <ColorSelectorButton - color={selectedThreadColors[5]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[6]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[7]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[8]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - <ColorSelectorButton - color={selectedThreadColors[9]} - currentColor={currentColor} - onColorSelection={onColorSelection} - /> - </div> + <ColorSelectorButton + color={selectedThreadColors[0]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[1]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[2]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[3]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[4]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[5]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[6]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[7]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[8]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> + <ColorSelectorButton + color={selectedThreadColors[9]} + currentColor={currentColor} + onColorSelection={onColorSelection} + /> </div> ); }