layout changes

2025-10-31 18:36:30 +01:00 · 2021-06-13 22:55:31 +02:00
parent e054a1694e
commit fb31acc8e0
30 changed files with 125 additions and 73 deletions
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -52,6 +52,7 @@ export default class DesktopLayout {
            .setParent(appContext)
            .child(new FlexContainer("column")
                .id("launcher-pane")
+                .css("width", "53px")
                .child(new GlobalMenuWidget())
                .child(new ButtonWidget()
                    .icon("bx-file-blank")
@@ -71,12 +72,12 @@ export default class DesktopLayout {
                    .command("showRecentChanges"))
                .child(new SpacerWidget(40, 0))
                .child(new FlexContainer("column")
-                    .id("plugin-buttons"))
+                    .id("plugin-buttons")
+                    .contentSized())
                .child(new SpacerWidget(0, 1000))
                .child(new ProtectedSessionStatusWidget())
                .child(new SyncStatusWidget())
                .child(new LeftPaneToggleWidget())
-                .css("width", "54px")
            )
            .child(new LeftPaneContainer()
                .child(new QuickSearchWidget())
@@ -93,14 +94,18 @@ export default class DesktopLayout {
                )
                .child(new FlexContainer('row')
                    .filling()
+                    .collapsible()
                    .child(new FlexContainer('column')
                        .filling()
+                        .collapsible()
                        .id('center-pane')
                        .child(new SplitNoteContainer(() =>
                            new FlexContainer('column')
                                .css("flex-grow", "1")
+                                .collapsible()
                                .child(new FlexContainer('row').class('title-row')
-                                    .css('align-items: center;')
+                                    .css("height", "50px")
+                                    .css('align-items', "center")
                                    .cssBlock('.title-row > * { margin: 5px; }')
                                    .child(new NoteIconWidget())
                                    .child(new NoteTitleWidget())
@@ -133,6 +138,7 @@ export default class DesktopLayout {
                                .child(new NoteUpdateStatusWidget())
                                .child(
                                    new ScrollingContainer()
+                                        .filling()
                                        .child(new SqlTableSchemasWidget())
                                        .child(new NoteDetailWidget())
                                        .child(new NoteListWidget())
--- a/src/public/app/services/note_list_renderer.js
+++ b/src/public/app/services/note_list_renderer.js
@@ -1,37 +1,36 @@
 import linkService from "./link.js";
 import noteContentRenderer from "./note_content_renderer.js";
 import froca from "./froca.js";
-import attributeService from "./attributes.js";
 import attributeRenderer from "./attribute_renderer.js";

 const TPL = `
-<div class="note-list">
+<div class="note-list-widget">
    <style>
-    .note-list {
+    .note-list-widget {
        overflow: hidden;
        position: relative;
        height: 100%;
    }
    
-    .note-list.grid-view .note-list-container {
+    .note-list-widget.grid-view .note-list-widget-container {
        display: flex;
        flex-wrap: wrap;
    }
    
-    .note-list.grid-view .note-book-card {
+    .note-list-widget.grid-view .note-book-card {
        flex-basis: 300px;
        border: 1px solid transparent;
    }
    
-    .note-list.grid-view .note-expander {
+    .note-list-widget.grid-view .note-expander {
        display: none;
    }
    
-    .note-list.grid-view .note-book-card {
+    .note-list-widget.grid-view .note-book-card {
        max-height: 300px;
    }
    
-    .note-list.grid-view .note-book-card:hover {
+    .note-list-widget.grid-view .note-book-card:hover {
        cursor: pointer;
        border: 1px solid var(--main-border-color);
        background: var(--more-accented-background-color);
@@ -199,7 +198,7 @@ class NoteListRenderer {

        this.$noteList.show();

-        const $container = this.$noteList.find('.note-list-container').empty();
+        const $container = this.$noteList.find('.note-list-widget-container').empty();

        const startIdx = (this.page - 1) * this.pageSize;
        const endIdx = startIdx + this.pageSize;
--- a/src/public/app/widgets/basic_widget.js
+++ b/src/public/app/widgets/basic_widget.js
@@ -26,7 +26,7 @@ class BasicWidget extends Component {
    }

    contentSized() {
-        console.log("Using contentSized() is deprecated NOOP and it is recommended to remove its use.");
+        this.css("contain", "none");

        return this;
    }
@@ -39,6 +39,7 @@ class BasicWidget extends Component {

    collapsible() {
        this.css('min-height', '0');
+        this.css('min-width', '0');
        return this;
    }

--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -4,6 +4,11 @@ import utils from "../../services/utils.js";
 const TPL = `
 <div class="dropdown global-menu dropright">
    <style>
+    .global-menu {
+        width: 53px;
+        height: 53px;
+    }
+    
    .global-menu .dropdown-menu {
        width: 20em;
    }
@@ -12,8 +17,8 @@ const TPL = `
        background-image: url("images/icon-bw.png");
        background-repeat: no-repeat;
        background-position: 50% 45%;
-        width: 53px;
-        height: 53px;
+        width: 100%;
+        height: 100%;
    }
    
    .global-menu-button:hover {
--- a/src/public/app/widgets/buttons/note_actions.js
+++ b/src/public/app/widgets/buttons/note_actions.js
@@ -4,6 +4,11 @@ import utils from "../../services/utils.js";
 const TPL = `
 <div class="dropdown note-actions">
    <style>
+    .note-actions {
+        width: 35px;
+        height: 35px;
+    }  
+    
    .note-actions .dropdown-menu {
        width: 15em;
    }
--- a/src/public/app/widgets/collapsible_widget.js
+++ b/src/public/app/widgets/collapsible_widget.js
@@ -16,6 +16,7 @@ export default class CollapsibleWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(WIDGET_TPL);
+        this.contentSized();
        this.$widget.find('[data-target]').attr('data-target', "#" + this.componentId);

        this.$bodyWrapper = this.$widget.find('.body-wrapper');
--- a/src/public/app/widgets/containers/left_pane_container.js
+++ b/src/public/app/widgets/containers/left_pane_container.js
@@ -7,6 +7,7 @@ export default class LeftPaneContainer extends FlexContainer {

        this.id('left-pane');
        this.css('height', '100%');
+        this.collapsible();
    }

    isEnabled() {
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -78,6 +78,9 @@ const TPL = `
    
    .ribbon-button-container .icon-action {
        padding: 5px;
+    }
+    
+    .ribbon-button-container > * {
        position: relative;
        top: -3px;
        margin-left: 10px;
@@ -115,6 +118,7 @@ export default class RibbonContainer extends NoteContextAwareWidget {
    constructor() {
        super();

+        this.contentSized();
        this.ribbonWidgets = [];
        this.buttonWidgets = [];
    }
--- a/src/public/app/widgets/containers/right_pane_container.js
+++ b/src/public/app/widgets/containers/right_pane_container.js
@@ -7,6 +7,7 @@ export default class RightPaneContainer extends FlexContainer {

        this.id('right-pane');
        this.css('height', '100%');
+        this.collapsible();
    }

    isEnabled() {
--- a/src/public/app/widgets/containers/scrolling_container.js
+++ b/src/public/app/widgets/containers/scrolling_container.js
@@ -4,7 +4,7 @@ export default class ScrollingContainer extends Container {
    constructor() {
        super();

-        this.css('height: 100%; overflow: auto;');
+        this.css('overflow', 'auto');
    }

    async noteSwitchedEvent({noteContext, notePath}) {
--- a/src/public/app/widgets/containers/split_note_container.js
+++ b/src/public/app/widgets/containers/split_note_container.js
@@ -8,8 +8,9 @@ export default class SplitNoteContainer extends FlexContainer {
        this.widgetFactory = widgetFactory;
        this.widgets = {};

-        this.class('note-split-container-widget');
+        this.class('split-note-container-widget');
        this.css('flex-grow', '1');
+        this.collapsible();
    }

    async newNoteContextCreatedEvent({noteContext}) {
--- a/src/public/app/widgets/note_icon.js
+++ b/src/public/app/widgets/note_icon.js
@@ -2,15 +2,17 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import attributeService from "../services/attributes.js";

 const TPL = `
-<div class="note-icon-container dropdown">
+<div class="note-icon-widget dropdown">
    <style>
-    .note-icon-container {
+    .note-icon-widget {
        padding-top: 3px;
        padding-left: 7px;
        margin-right: 0;
+        width: 50px;
+        height: 50px;
    }
    
-    .note-icon-container button.note-icon {
+    .note-icon-widget button.note-icon {
        font-size: 180%;
        background-color: transparent;
        border: 1px solid transparent;
@@ -19,18 +21,18 @@ const TPL = `
        color: var(--main-text-color);
    }
    
-    .note-icon-container button.note-icon:hover {
+    .note-icon-widget button.note-icon:hover {
        border: 1px solid var(--main-border-color);
    }
    
-    .note-icon-container .dropdown-menu {
+    .note-icon-widget .dropdown-menu {
        border-radius: 10px;
        border-width: 2px;
        box-shadow: 10px 10px 93px -25px black;
        padding: 10px 15px 10px 15px !important;
    }
    
-    .note-icon-container .filter-row {
+    .note-icon-widget .filter-row {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 20px;
@@ -38,19 +40,19 @@ const TPL = `
        align-items: baseline;
    }
    
-    .note-icon-container .filter-row span {
+    .note-icon-widget .filter-row span {
        display: block;
        padding-left: 15px;
        padding-right: 15px;
        font-weight: bold;
    }
    
-    .note-icon-container .icon-list {
+    .note-icon-widget .icon-list {
        height: 500px;
        overflow: auto;
    }
    
-    .note-icon-container .icon-list span {
+    .note-icon-widget .icon-list span {
        display: inline-block;
        padding: 10px;
        cursor: pointer;
@@ -58,7 +60,7 @@ const TPL = `
        font-size: 180%;
    }
    
-    .note-icon-container .icon-list span:hover {
+    .note-icon-widget .icon-list span:hover {
        border: 1px solid var(--main-border-color);
    }
    </style>
--- a/src/public/app/widgets/note_title.js
+++ b/src/public/app/widgets/note_title.js
@@ -6,20 +6,21 @@ import SpacedUpdate from "../services/spaced_update.js";
 import appContext from "../services/app_context.js";

 const TPL = `
-<div class="note-title-container">
+<div class="note-title-widget">
    <style>
-    .note-title-container {
+    .note-title-widget {
        flex-grow: 1000;
+        height: 100%;
    }
    
-    .note-title-container input.note-title {
+    .note-title-widget input.note-title {
        font-size: 180%;
        border: 0;
        min-width: 5em;
        width: 100%;
    }
    
-    .note-title-container input.note-title.protected {
+    .note-title-widget input.note-title.protected {
        text-shadow: 4px 4px 4px var(--muted-text-color);
    }
    </style>
--- a/src/public/app/widgets/note_type.js
+++ b/src/public/app/widgets/note_type.js
@@ -15,7 +15,7 @@ const NOTE_TYPES = [
 ];

 const TPL = `
-<div class="dropdown note-type">
+<div class="dropdown note-type-widget">
    <style>
    .note-type-dropdown {
        max-height: 500px;
--- a/src/public/app/widgets/quick_search.js
+++ b/src/public/app/widgets/quick_search.js
@@ -10,7 +10,8 @@ const TPL = `
 <div class="quick-search input-group input-group-sm">
  <style>
    .quick-search {
-        padding: 10px 10px 10px 10px;
+        padding: 10px 10px 10px 0px;
+        height: 50px;
    }
    
    .quick-search button, .quick-search input {
--- a/src/public/app/widgets/ribbon_widgets/basic_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/basic_properties.js
@@ -21,7 +21,7 @@ const TPL = `
        }
    </style>
    
-    <div class="note-type-container" style="display: flex">
+    <div class="note-type-container">
        <span>Note type:</span> &nbsp;
    </div>
    
@@ -32,8 +32,8 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {
    constructor() {
        super();

-        this.noteTypeWidget = new NoteTypeWidget();
-        this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget();
+        this.noteTypeWidget = new NoteTypeWidget().contentSized();
+        this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized();

        this.child(this.noteTypeWidget, this.protectedNoteSwitchWidget);
    }
@@ -52,6 +52,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
        this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());
--- a/src/public/app/widgets/ribbon_widgets/book_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/book_properties.js
@@ -1,5 +1,4 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import server from "../../services/server.js";
 import attributeService from "../../services/attributes.js";

 const TPL = `
@@ -58,6 +57,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$viewTypeSelect = this.$widget.find('.view-type-select');
        this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val()));
--- a/src/public/app/widgets/ribbon_widgets/file_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/file_properties.js
@@ -70,6 +70,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();
        this.$fileNoteId = this.$widget.find(".file-note-id");
        this.$fileName = this.$widget.find(".file-filename");
        this.$fileType = this.$widget.find(".file-filetype");
--- a/src/public/app/widgets/ribbon_widgets/image_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/image_properties.js
@@ -52,6 +52,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();
        this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
        this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
        this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
--- a/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
+++ b/src/public/app/widgets/ribbon_widgets/inherited_attribute_list.js
@@ -38,6 +38,7 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$container = this.$widget.find('.inherited-attributes-container');
        this.$widget.append(this.attributeDetailWidget.render());
--- a/src/public/app/widgets/ribbon_widgets/link_map.js
+++ b/src/public/app/widgets/ribbon_widgets/link_map.js
@@ -52,6 +52,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();
        this.$container = this.$widget.find(".link-map-container");

        this.openState = 'small';
@@ -177,7 +178,7 @@ export default class LinkMapWidget extends NoteContextAwareWidget {
    renderData(data, zoomToFit = true, zoomPadding = 10) {
        this.graph.graphData(data);

-        if (zoomToFit) {
+        if (zoomToFit && data.nodes.length > 1) {
            setTimeout(() => this.graph.zoomToFit(400, zoomPadding), 1000);
        }
    }
--- a/src/public/app/widgets/ribbon_widgets/note_info_widget.js
+++ b/src/public/app/widgets/ribbon_widgets/note_info_widget.js
@@ -76,6 +76,7 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$noteId = this.$widget.find(".note-info-note-id");
        this.$dateCreated = this.$widget.find(".note-info-date-created");
--- a/src/public/app/widgets/ribbon_widgets/note_paths.js
+++ b/src/public/app/widgets/ribbon_widgets/note_paths.js
@@ -50,6 +50,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$notePathIntro = this.$widget.find(".note-path-intro");
        this.$notePathList = this.$widget.find(".note-path-list");
--- a/src/public/app/widgets/ribbon_widgets/note_properties.js
+++ b/src/public/app/widgets/ribbon_widgets/note_properties.js
@@ -30,6 +30,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$pageUrl = this.$widget.find('.page-url');
    }
--- a/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
+++ b/src/public/app/widgets/ribbon_widgets/owned_attribute_list.js
@@ -25,8 +25,13 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
    constructor() {
        super();

-        this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
-        this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
+        this.attributeDetailWidget = new AttributeDetailWidget()
+            .contentSized()
+            .setParent(this);
+
+        this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget)
+            .contentSized()
+            .setParent(this);

        this.child(this.attributeEditorWidget, this.attributeDetailWidget);
    }
@@ -41,6 +46,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
        this.$widget.append(this.attributeDetailWidget.render());
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -37,6 +37,7 @@ const TPL = `
 export default class PromotedAttributesWidget extends NoteContextAwareWidget {
    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();
        this.$container = this.$widget.find(".promoted-attributes-container");
    }

--- a/src/public/app/widgets/ribbon_widgets/search_definition.js
+++ b/src/public/app/widgets/ribbon_widgets/search_definition.js
@@ -223,9 +223,9 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();
        this.$component = this.$widget.find('.search-definition-widget');

-
        this.$widget.on('click', '[data-search-option-add]', async event => {
            const searchOptionName = $(event.target).attr('data-search-option-add');
            const clazz = OPTION_CLASSES.find(SearchOptionClass => SearchOptionClass.optionName === searchOptionName);
--- a/src/public/app/widgets/ribbon_widgets/similar_notes.js
+++ b/src/public/app/widgets/ribbon_widgets/similar_notes.js
@@ -47,6 +47,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {

    doRender() {
        this.$widget = $(TPL);
+        this.contentSized();

        this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
    }
--- a/src/public/app/widgets/tab_row.js
+++ b/src/public/app/widgets/tab_row.js
@@ -43,9 +43,9 @@ const NEW_TAB_BUTTON_TPL = `<div class="note-new-tab" data-trigger-command="open
 const FILLER_TPL = `<div class="tab-row-filler"></div>`;

 const TAB_ROW_TPL = `
-<div class="note-tab-row">
+<div class="tab-row-widget">
    <style>
-    .note-tab-row {
+    .tab-row-widget {
        box-sizing: border-box;
        position: relative;
        width: 100%;
@@ -54,19 +54,19 @@ const TAB_ROW_TPL = `
        margin-top: 2px;
    }
    
-    .note-tab-row * {
+    .tab-row-widget * {
        box-sizing: inherit;
        font: inherit;
    }
    
-    .note-tab-row .note-tab-row-container {
+    .tab-row-widget .tab-row-widget-container {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
-    .note-tab-row .note-tab {
+    .tab-row-widget .note-tab {
        position: absolute;
        left: 0;
        width: 240px;
@@ -103,22 +103,22 @@ const TAB_ROW_TPL = `
        left: 0;
    }
        
-    .note-tab-row .note-tab[active] {
+    .tab-row-widget .note-tab[active] {
        z-index: 5;
    }
    
-    .note-tab-row .note-tab,
-    .note-tab-row .note-tab * {
+    .tab-row-widget .note-tab,
+    .tab-row-widget .note-tab * {
        user-select: none;
        cursor: default;
    }
    
-    .note-tab-row .note-tab.note-tab-was-just-added {
+    .tab-row-widget .note-tab.note-tab-was-just-added {
        top: 10px;
        animation: note-tab-was-just-added 120ms forwards ease-in-out;
    }
    
-    .note-tab-row .note-tab .note-tab-wrapper {
+    .tab-row-widget .note-tab .note-tab-wrapper {
        position: absolute;
        display: flex;
        top: 0;
@@ -134,35 +134,35 @@ const TAB_ROW_TPL = `
        background-color: var(--inactive-tab-background-color);
    }
    
-    .note-tab-row .note-tab[active] .note-tab-wrapper {
+    .tab-row-widget .note-tab[active] .note-tab-wrapper {
        font-weight: bold;
        color: var(--active-tab-text-color);
        background-color : var(--active-tab-background-color);
    }
    
-    .note-tab-row .note-tab[is-mini] .note-tab-wrapper {
+    .tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
        padding-left: 2px;
        padding-right: 2px;
    }
    
-    .note-tab-row .note-tab .note-tab-title {
+    .tab-row-widget .note-tab .note-tab-title {
        flex: 1;
        vertical-align: top;
        overflow: hidden;
        white-space: nowrap;
    }
    
-    .note-tab-row .note-tab .note-tab-icon {
+    .tab-row-widget .note-tab .note-tab-icon {
        position: relative;
        top: -1px;
        padding-right: 3px;
    }
    
-    .note-tab-row .note-tab[is-small] .note-tab-title {
+    .tab-row-widget .note-tab[is-small] .note-tab-title {
        margin-left: 0;
    }
    
-    .note-tab-row .note-tab .note-tab-drag-handle {
+    .tab-row-widget .note-tab .note-tab-drag-handle {
        position: absolute;
        top: 0;
        bottom: 0;
@@ -172,7 +172,7 @@ const TAB_ROW_TPL = `
        border-top-right-radius: 8px;
    }
    
-    .note-tab-row .note-tab .note-tab-close {
+    .tab-row-widget .note-tab .note-tab-close {
        flex-grow: 0;
        flex-shrink: 0;
        border-radius: 50%;
@@ -180,24 +180,24 @@ const TAB_ROW_TPL = `
        text-align: center;
    }
    
-    .note-tab-row .note-tab .note-tab-close span {
+    .tab-row-widget .note-tab .note-tab-close span {
        font-size: 24px;
        position: relative;
        top: -6px;
    }
    
-    .note-tab-row .note-tab .note-tab-close:hover {
+    .tab-row-widget .note-tab .note-tab-close:hover {
        background-color: var(--hover-item-background-color);
        color: var(--hover-item-text-color);
    }
    
-    .note-tab-row .note-tab[is-smaller] .note-tab-close {
+    .tab-row-widget .note-tab[is-smaller] .note-tab-close {
        margin-left: auto;
    }
-    .note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close {
+    .tab-row-widget .note-tab[is-mini]:not([active]) .note-tab-close {
        display: none;
    }
-    .note-tab-row .note-tab[is-mini][active] .note-tab-close {
+    .tab-row-widget .note-tab[is-mini][active] .note-tab-close {
        margin-left: auto;
        margin-right: auto;
    }
@@ -221,13 +221,13 @@ const TAB_ROW_TPL = `
            top: 0;
        }
    }
-    .note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging),
-    .note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged {
+    .tab-row-widget.tab-row-widget-is-sorting .note-tab:not(.note-tab-is-dragging),
+    .tab-row-widget:not(.tab-row-widget-is-sorting) .note-tab.note-tab-was-just-dragged {
        transition: transform 120ms ease-in-out;
    }
    </style>

-    <div class="note-tab-row-container"></div>
+    <div class="tab-row-widget-container"></div>
 </div>`;

 export default class TabRowWidget extends BasicWidget {
@@ -296,7 +296,7 @@ export default class TabRowWidget extends BasicWidget {
    }

    get $tabContainer() {
-        return this.$widget.find('.note-tab-row-container');
+        return this.$widget.find('.tab-row-widget-container');
    }

    get tabWidths() {
@@ -482,7 +482,7 @@ export default class TabRowWidget extends BasicWidget {

        if (this.isDragging) {
            this.isDragging = false;
-            this.$widget.removeClass('note-tab-row-is-sorting');
+            this.$widget.removeClass('tab-row-widget-is-sorting');
            this.draggabillyDragging.element.classList.remove('note-tab-is-dragging');
            this.draggabillyDragging.element.style.transform = '';
            this.draggabillyDragging.dragEnd();
@@ -512,7 +512,7 @@ export default class TabRowWidget extends BasicWidget {
                this.isDragging = true;
                this.draggabillyDragging = draggabilly;
                tabEl.classList.add('note-tab-is-dragging');
-                this.$widget.addClass('note-tab-row-is-sorting');
+                this.$widget.addClass('tab-row-widget-is-sorting');
            });

            draggabilly.on('dragEnd', _ => {
@@ -527,7 +527,7 @@ export default class TabRowWidget extends BasicWidget {

                    requestAnimationFrame(_ => {
                        tabEl.classList.remove('note-tab-is-dragging');
-                        this.$widget.removeClass('note-tab-row-is-sorting');
+                        this.$widget.removeClass('tab-row-widget-is-sorting');

                        tabEl.classList.add('note-tab-was-just-dragged');

--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -20,6 +20,10 @@ body {
    width: 100%;
 }

+.component {
+    contain: size;
+}
+
 code, kbd, pre, samp {
    font-family: var(--font-family-monospace);
 }
@@ -65,6 +69,8 @@ button.close:hover {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 5px;
+    width: 35px;
+    height: 35px;
    cursor: pointer;
    font-size: 1.5em;
    color: var(--button-text-color);
@@ -879,6 +885,8 @@ ul.fancytree-container li {
    cursor: pointer;
    border: none;
    color: var(--launcher-pane-text-color);
+    width: 53px;
+    height: 53px;
 }

 #launcher-pane .icon-action:hover {