Date text is rendered lower than other elements in status bar

[AndrewBastin]

Date text is rendered lower than other elements in the status bar as of Atom Version 1.17.0

[b3by]

Thank you for this. I'll look into it ASAP, as the rendering position has been an issue for quite a while. On which platform you experienced this problem?

[AndrewBastin]

I am experiencing this in Windows...

[b3by]

I'm fixing this right now. It seems to be a thing on OS X as well.

[ftm]

Removing all the CSS and adding the inline-block class to the clock element seemed to fix it for me. I'm on OS X by the way.

atom-clock.less:

@import "ui-variables";

.atom-clock {
  // display: inline-block;
  // margin-left: 1em;
  // margin-right: 0.5em;
  // position: relative;
  // vertical-align: middle;
  //
  // .span {
  //   text-align: left;
  // }
}

atom-clock-view.js:

drawElement() {
    this.element = document.createElement('div')
    this.element.className = 'atom-clock inline-block'
    this.element.appendChild(document.createElement('span'))

    this.statusBar.addRightTile({
      item: this.element,
      priority: -1
    })
  }

See before (top) and after (bottom)

[b3by]

I actually did not change the code, just the style file, adding some stuff for the icon. The result seems to be pretty much the same.

@import "ui-variables";
@import "octicon-mixins";

.atom-clock {
  display: inline-block;
  position: relative;

  .icon:before {
    .icon-size(14px);
    top: 1px;
    margin-right: 3px;
  }

}

[b3by]

Actually, the atom-clock class should also have margin-left set to @component-padding, so that there will be space between the clock and the element to the left.

[b3by]

Seems to be reasonable. I still don't know whether this is the right solution, or the css style is useless.

[ftm]

The inline-block class seems to add margin-left: 1.5em so maybe the CSS could just be used to move the icon around. Up to you I guess, it seems to be what other packages are using