Merge pull request #36258 from nextcloud/fix/user-status-input

Fix user status message input

apps/user_status/src/components/CustomMessageInput.vue

@@ -19,25 +19,27 @@
   -
   -->
 <template>
-	<div class="custom-input__form">
+	<div class="custom-input">
-		<NcEmojiPicker container=".custom-input__form" @select="setIcon">
+		<NcEmojiPicker container=".custom-input" @select="setIcon">
-			<NcButton class="custom-input__emoji-button" type="tertiary-no-background">
+			<NcButton class="custom-input__emoji-button" type="tertiary">
 				{{ visibleIcon }}
 			</NcButton>
 		</NcEmojiPicker>
-		<label class="hidden-visually" for="user_status_message">
+		<div class="custom-input__container">
-			{{ t('user_status', 'What is your status?') }}
+			<label class="hidden-visually" for="user_status_message">
-		</label>
+				{{ t('user_status', 'What is your status?') }}
-		<input id="user_status_message"
+			</label>
-			ref="input"
+			<input id="user_status_message"
-			maxlength="80"
+				ref="input"
-			:disabled="disabled"
+				maxlength="80"
-			:placeholder="$t('user_status', 'What is your status?')"
+				:disabled="disabled"
-			type="text"
+				:placeholder="$t('user_status', 'What is your status?')"
-			:value="message"
+				type="text"
-			@change="onChange"
+				:value="message"
-			@keyup="onKeyup"
+				@change="onChange"
-			@paste="onKeyup">
+				@keyup="onKeyup"
+				@paste="onKeyup">
+		</div>
 	</div>
 </template>
 
@@ -112,18 +114,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.custom-input__form {
+.custom-input {
-	flex-grow: 1;
+	display: flex;
-	position: relative;
+	width: 100%;
 
-	.v-popper {
+	&__emoji-button {
-		position: absolute;
+		min-height: 36px;
+		padding: 0;
+		border: 2px solid var(--color-border-maxcontrast);
+		border-right: none;
+		border-radius: var(--border-radius) 0 0 var(--border-radius);
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
 	}
 
-	input {
+	&__container {
 		width: 100%;
-		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+
-		padding-left: 44px !important;
+		input {
+			width: 100%;
+			margin: 0;
+			border-radius: 0 var(--border-radius) var(--border-radius) 0;
+		}
 	}
 }
 </style>

apps/user_status/src/components/SetStatusModal.vue

@@ -246,16 +246,6 @@ export default {
 		display: flex;
 		width: 100%;
 		margin-bottom: 10px;
-
-		.custom-input__emoji-button {
-			flex-basis: 40px;
-			flex-grow: 0;
-			width: 40px;
-			height: 34px;
-			margin-right: 0;
-			border-right: none;
-			border-radius: var(--border-radius) 0 0 var(--border-radius);
-		}
 	}
 
 	.status-buttons {