Cut back on whitespace chrome to allow more content to be visible – Case: e-Boks

e-Boks is a Danish provider of a digital inbox solution, where the public authorities and private sector companies can send messages to citizens or customers, typically as PDF documents. From the inbox these documents are opened in a fullscreen viewer.

However, the whitespace in the chrome of this viewer is taking up way too much precious screen real estate, thus hiding quite a large amount of the actual content.

Before

e-Boks PDF viewer – original design:

After quick redesign

Luckily, with a quick CSS fix, this whitespace can be minimized, as seen here:

If you have e-Boks, try it out yourself in Google Chrome:

1. Get the Stylebot Chrome extension
2. Go to your personal e-Boks
3. Open Stylebot and click the "Edit CSS" button
4. Paste in the following CSS and click Save:

/***********************************************************
   Go to your personal e-Boks
   Then try paste this CSS into Stylebot Chrome extension: 
***********************************************************/

#CloseModal {
    background-color: #eee;
}

#mailTitle {
    font-size: 16px;
}

.elements-wrapper {
    margin-bottom: 0;
}

.fullScreen .viewDocument .content {
    padding-bottom: 0;
}

.ng-modal-dialog.fullScreen .modalContent {
    padding: 0;
}

.ng-modal-dialog.fullScreen .modalContent .viewDocument .controls {
    margin-bottom: 0;
}

.ng-modal-dialog.fullScreen .modalContent .viewDocument .elements-wrapper .modalHeader {
    margin-bottom: 3px;
    margin-top: 1px;
    padding: 0;
}

.viewDocument .controls .control-item {
    padding-bottom: 6px;
    padding-top: 4px;
}

.viewDocument .controls .control-item a em {
    top: 6px;
}