Merge pull request #61668 from nextcloud/fix/search-input-document-flow

fix(core): keep the header search input in document flow

Author: artonge

core/css/header.css

@@ -60,7 +60,8 @@
 		overflow: hidden;
 		margin: 2px;
 
-		&:hover, &:active {
+		&:hover,
+		&:active {
 			opacity: 1;
 		}
 
@@ -112,15 +113,38 @@
 		min-width: 0;
 	}
 
+	// This is the center part of the header
+	// for the user template it contains unified search
+	.header-center {
+		display: inline-flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex: 0 1 auto;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
 	// This is the last part of the header
-	// It contains the short cuts like unified search, contacts-, or account menu
+	// It contains the short cuts like contacts-, or account menu
 	.header-end {
 		display: inline-flex;
 		align-items: center;
 		justify-content: flex-end;
 		flex-shrink: 1;
 		// Add some spacing so the last entry looks ok
 		margin-inline-end: calc(3 * var(--default-grid-baseline));
+
+		// Only grow to match header-start on desktop, and only
+		// in the user layout where header-center exists.
+		// Below the mobile breakpoint the search collapses to an icon,
+		// and header-end must stay content-sized so header-start pushes
+		// that icon flush to the right edge. The public layout has
+		// no centered search, so it keeps the content-sized header-end.
+		@media (min-width: 512px) {
+			#body-user & {
+				flex: 1 0;
+			}
+		}
 	}
 
 	// Public layout related headers
@@ -148,7 +172,7 @@
 				text-overflow: ellipsis;
 			}
 
-			.header-shared-by  {
+			.header-shared-by {
 				color: var(--color-background-plain-text);
 				position: relative;
 				font-weight: 300;