From 6e83f05ba9f1b4def2196242ab172ec81ff99ccc Mon Sep 17 00:00:00 2001
From: Sami Viitanen <sami.a.viitanen@outlook.com>
Date: Thu, 14 Nov 2024 11:32:09 +0200
Subject: [PATCH] Set max-width for quick themes container in sidebar menu
 settings tab

---
 .../scripts/tim/sidebarmenu/tabs/settings-tab.component.scss | 3 +++
 .../scripts/tim/sidebarmenu/tabs/settings-tab.component.ts   | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.scss

diff --git a/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.scss b/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.scss
new file mode 100644
index 000000000..d292a6ddb
--- /dev/null
+++ b/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.scss
@@ -0,0 +1,3 @@
+.quick-theme-container {
+    max-width: 20em;
+}
\ No newline at end of file
diff --git a/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.ts b/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.ts
index 377fa46a4..b27e3d026 100644
--- a/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.ts
+++ b/timApp/static/scripts/tim/sidebarmenu/tabs/settings-tab.component.ts
@@ -61,7 +61,7 @@ export function notifyUserPrefsChanged(settings: ISettings) {
         <ng-template i18n>Document settings</ng-template>
         <ng-container *ngIf="users.isRealUser() && quickThemes.length > 0">
             <h5 i18n>Quick themes</h5>
-            <div class="flex flex-wrap gap-1">
+            <div class="flex flex-wrap gap-1 quick-theme-container">
                 <button *ngFor="let theme of quickThemes"
                         class="btn btn-xs" 
                         [class.btn-primary]="theme.enabled"
@@ -282,9 +282,10 @@ export function notifyUserPrefsChanged(settings: ISettings) {
 
         <ng-container *ngIf="users.canScheduleFunctions()">
             <h5 i18n>Scheduled functions</h5>
-            <button (click)="openScheduleDialog()" class="timButton" i18n>Manage scheduled functions</button>
+            <button (click)="openScheduleDialog()" class="timButton btn-block" i18n>Manage scheduled functions</button>
         </ng-container>
     `,
+    styleUrls: ["./settings-tab.component.scss"],
 })
 export class SettingsTabComponent implements OnInit {
     hideVars: IVisibilityVars = getVisibilityVars();