Adjustable width

[BKVad1m]

This feature allows to adjust the width to expand texts on tasks

[Hal404]

I was going to submit an Issue for this very feature, but as adjustable width and height for the entire container. I did some testing using manual edits, and the plugin is truly dead-simple; add in a viewport measurement change to make the main container fit the screen however much you want, then set the width and height for the widgets. The only thing that's stopping me really from doing a PR contribution for this is I've never used Svelte and have no idea how I would add in a setting for it 😆

[Hal404]

Well, I didn't add in the feature, as web-tech already gives me a headache, but I did find out how stupid I was thanks to the built-in custom CSS option in the Settings menu. It may not be some menu slider, but it works for moving things around and adding what flair you want. However, I do agree that some basic sliders would be more clean and beneficial for anyone who can't or won't work with CSS dissection.

The CSS in question:

/*================
Background Changes
================*/
body {
   background: url('https://images.unsplash.com/photo-1666608561767-2bcaaf1e2ec4?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTc4NTk3OTI4OXw&ixlib=rb-4.1.0&q=85&w=1920');
   backdrop-filter: blur(.5em);
}
.panel-wrapper {
   background: var(--bg-1);
}

/*===============
Width Adjustments
===============*/

/*Main Body*/
#app main .container {
   width: 85%;
}

/*Top Row, Datetime widget*/
.top .panel-wrapper:nth-child(1) {
   width: 65%;
}

/*Top Row, Stats widget*/
.top .panel-wrapper:nth-child(2) {
   width: 35%;
}

/*Middle Row, Weather widget*/
.widgets .panel-wrapper:nth-child(1) {
   width: 35%;
}

/*========================
Middle Row, Weather widget
========================*/

/*Current Temp, Coverage*/
.widgets .panel-wrapper:nth-child(1) .panel .temp,
.widgets .panel-wrapper:nth-child(1) .panel .description {
   justify-content: center;
   display: flex;
}

/*Current Stats*/
.widgets .panel-wrapper:nth-child(1) .panel .stats .col {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}
.widgets .panel-wrapper:nth-child(1) .panel .stats .col:nth-child(1) div {
   justify-content: right;
   display: flex;
}
.widgets .panel-wrapper:nth-child(1) .panel .stats .col:nth-child(1) div span {
   padding-left: .6em;
}

/*Short-Term Forecast*/
.widgets .panel-wrapper:nth-child(1) .panel .forecast .col {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}
.widgets .panel-wrapper:nth-child(1) .panel .forecast .col:nth-child(1) {
   width: 66%;
}
.widgets .panel-wrapper:nth-child(1) .panel .forecast .col:nth-child(2) {
   width: auto;
}

/*======================
Middle Row, Tasks Widget
======================*/
.task {
   max-width: unset !important;
}
.widgets .panel-wrapper:nth-child(2) .panel .tasks .tasks-list .task .task-title {
   width: 100% !important;
}
.tasks .tasks-list .task .task-title-input {
   width: 100% !important;
}