Load spread in the center of the orderbook panel

[burnsben]

The spread is currently not centered in the panel on page load.

Also the text needs to be centered in this space

View the mock for guidance on how this middle section should look:

[burnsben]

Could use about 3 more pixels of padding above the text

[gabitoesmiapodo]

@burnsben

About "The spread is currently not centered in the panel on page load.": It will only get centered if there are enough elements above and below the Spread. Otherwise it's not possible for the list to scroll to get the Spread vertically centered.

In other words: if you are not able to scroll it manually, it can't be done automatically.

Not sure if that is the case with your example, could you confirm if it's possible for you to scroll the spread where you want it, but it refuses to do it by itself on page loading?

[burnsben]

My bad, it seems to be loading fine now, can't repro the issue I had the other day. Hoping we can keep a high priority tag on getting the "spread" text centered in that space.

[gabitoesmiapodo]

@burnsben

My bad, it seems to be loading fine now, can't repro the issue I had the other day. Hoping we can keep a high priority tag on getting the "spread" text centered in that space.

If I understand correctly, that's what you'd like to see.

It would be possible to do that by wrapping the content of each cell in that column (for example in a span element), having that span centered horizontally within the cell, and at the same time aligning the span's text to the right.

Something like this pseudo code:

<Column>
  <Cell><span style={ width: widerSpan; text-align: right; }>Some content</span></Cell>
  <Cell><span style={ width: widerSpan; text-align: right; }>Some content</span></Cell>
  <Cell><span style={ width: widerSpan; text-align: right; }>Some content</span></Cell>
  <Cell><span style={ width: widerSpan; text-align: right; }>Some content</span></Cell>
</Column>

The problem is: for this to work, all these spans should be the same width as the wider span in that column, and I can't think of an easy and non messy way to do this with our current implementation.

[burnsben]

Sorry if I was unclear, the issue here is that the "spread" text is not centered vertically. It has a few less pixels above than below.

[burnsben]

here's a wider crop for context.

[chriskalani]

I want to make sure this one doesn't get lost. We're still seeing the 2 UI issues Ben mentioned in the comments here