UI Issues

[AyushKenhi]

Problem with tab width and setting sub menu

Reproduction Steps:

1. Install file-icons

Expected behavior:

1. Tab should adjust according to name of file
2. The sub menu should adjust according to the button "Open Config Folder"

Observed behavior:

Tab width is fixed the button content spills over its container

Screenshots and GIFs

Atom version: 1.17.2 OS and version: Ubuntu 17.04

Installed packages:

ariake-dark-syntax@0.1.3 atom-beautify@0.29.26 atom-material-syntax@1.0.6 atom-material-syntax-dark@1.0.0 atom-material-syntax-light@0.4.6 atom-material-ui@2.0.4 aurora-theme@1.2.2 busy-signal@1.4.1 color-picker@2.2.5 colorblind-wombat-dark-syntax@0.6.0 emmet@2.4.3 file-icons@2.1.6 gloom@0.6.4 gruvbox-plus-syntax@1.3.1 highlight-selected@0.13.1 intentions@1.1.2 linter@2.1.4 linter-ui-default@1.6.0 minimap@4.28.2 minimap-highlight-selected@4.6.1 minimap-linter@2.0.0 minimap-pigments@0.2.2 multi-cursor@2.1.5 nord-atom-syntax@0.9.1 nord-atom-ui@0.11.0 paraiso-dark@2.0.2

[silvestreh]

Looks like you're using a custom font for the UI

[AyushKenhi]

It looks like this

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */

/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
  font-size: .85em
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}
atom-workspace,
atom-text-editor {
  font-family: "Fira Code Medium";
  text-rendering: optimizeLegibility;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
}
atom-text-editor.editor {
  .syntax--entity.syntax--other.syntax--attribute-name {
        font-family: "Operator Mono";
        font-size: 1.075em;
        font-style: italic;
        line-height: normal;
      }
}

[silvestreh]

Yeah, you're applying Fira Code to the entire UI. Here's what it looks like out of the box:

You can try removing atom-workspace from your CSS selector or, preferably, set the font family within Atom's settings: