eclipse-theia/theia

Font-awesome icons in statusbar with zoomlevel have too big bounding box

Open

#6,028 opened on Aug 23, 2019

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (18,676 stars) (2,478 forks)batch import
bughelp wantedshell

Description

Description

If one adds an entry with text only an icon to the status bar with a zoomlevel that is not 100% the bounding box is way too big: Screenshot from 2019-08-23 15-06-13 It should normally look like this: Screenshot from 2019-08-23 15-13-27

Reproduction Steps

Add an entry to the status bar:

this.statusbar.setElement('compile-status', {
  alignment: StatusBarAlignment.LEFT,
  priority: 5,
  text: `$(check)`,
  tooltip: 'Compilation finished',
  onclick: () => this.front.shell.revealWidget(compilerWidgetId)
})

OS and Theia version: ubuntu 18.04 LTS, Theia 0.9.0-next.7fe439a3

Diagnostics: Changing the zoomlevel to 100% after adding it to the statusbar does not fix the problem, but zooming out after it was added does cause it.

Contributor guide

Tech stack
typescriptnodejshtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS layout knowledgeTheia status bar basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the status bar's CSS and the effect of zoom level on icon bounding boxes. Look at the status bar widget in the Theia source (likely in packages/status bar). Consider how zoom is applied and whether it affects font awesome icons' container. There are no linked PRs or comments suggesting a solution.