Adjust app to work with NC25

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

3 files changed, 22 insertions, 11 deletions

diff --git a/src/App.vue b/src/App.vue
index 5ccb4521..021e837e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -156,12 +156,21 @@ $breakpoint-mobile: 1024px;
 body {
 	min-height: 100%;
 	height: auto;
+	// Adjustment necessary to use nc/vue@6 with NC25
+	position: initial;
 }
 
 </style>
 
 <style lang="scss" scoped>
+// Adjustment necessary to use nc/vue@6 with NC25
+#content-vue {
+	max-height: 100vh;
+}
+
 .app-content {
+	// Adjustment necessary to use nc/vue@6 with NC25
+	overflow-y: scroll;
 	background-color: var(--color-background-dark) !important;
 
 	> div {
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 8f6ddb44..9ec4c4f7 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -28,7 +28,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 				<input v-model="newTaskName"
 					:placeholder="placeholder"
 					autocomplete="off"
-					class="transparent reactive"
+					class="reactive"
 					@keyup.27="clearNewTask($event)">
 			</form>
 		</div>
@@ -122,7 +122,7 @@ $breakpoint-mobile: 1024px;
 .header {
 	padding: 12px 15px 12px 59px;
 	position: sticky;
-	top: 50px;
+	top: 0;
 	background-color: var(--color-background-dark);
 	z-index: 1000;
 	display: flex;
@@ -148,8 +148,8 @@ $breakpoint-mobile: 1024px;
 			color: var(--color-main-text);
 			cursor: text;
 			font-size: 100%;
-			margin: 0;
-			padding: 0 15px 0 44px;
+			margin: 0 !important;
+			padding: 0 15px 0 44px !important;
 			width: 100%;
 			min-height: 44px;
 			overflow: hidden;
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index fcb86479..458b4224 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -142,7 +142,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div class="task-item__subtasks">
 			<div v-if="showSubtaskInput"
 				v-click-outside="{ handler: closeSubtaskInput, middleware: clickOutsideMiddleware }"
-				class="task-item task-item--input">
+				class="task-item task-item__input">
 				<form name="addTaskForm" @submit.prevent="addTask">
 					<Plus :size="20" />
 					<input ref="input"
@@ -671,8 +671,10 @@ $breakpoint-mobile: 1024px;
 		z-index: 5;
 	}
 
-	&--input {
+	&__input {
 		border-top: 1px solid var(--color-border);
+		overflow: hidden;
+		border-radius: 0;
 
 		.material-design-icon {
 			position: absolute;
@@ -680,14 +682,14 @@ $breakpoint-mobile: 1024px;
 		}
 
 		input {
-			border-radius: 0;
+			border-radius: 0 !important;
 			border: medium none !important;
 			box-sizing: border-box;
 			color: var(--color-main-text);
 			cursor: text;
 			font-size: 100%;
-			margin: 0;
-			padding: 0 15px 0 44px;
+			margin: 0 !important;
+			padding: 0 15px 0 44px !important;
 			width: 100%;
 			min-height: 44px;
 			overflow: hidden;
@@ -703,14 +705,14 @@ $breakpoint-mobile: 1024px;
 		border-bottom-right-radius: var(--border-radius-large);
 	}
 
-	&:not(.task-item--subtasks-visible).task-item--input input {
+	&:not(.task-item--subtasks-visible).task-item__input {
 		border-bottom-left-radius: var(--border-radius-large);
 		border-bottom-right-radius: var(--border-radius-large);
 	}
 
 	// Don't show round corners if any of the ancestors is not the last in the (sub-)list
 	&:not(:last-child) {
-		.task-item--input input {
+		.task-item__input {
 			border-bottom-left-radius: 0;
 			border-bottom-right-radius: 0;
 		}