, and the tools live in the
third | . That cell measured 837px of a 1258px header, and the list inside
it started at the cell's left edge — so the icons sat in the middle of the
bar with 700px of empty cell to their right. `margin-left: auto` was already
there and did nothing: the div is a block filling the cell, so there is no
free space for auto margins to take. The list has to be told to pack right.
The avatar jumping: it is a 34px image in a row of 15px glyphs. Sitting in
the same 54px cell it is correctly centred and still reads as riding higher
than its neighbours, because it is more than twice their size. Matching it to
them settles the row.
========================================================================= */
/* Let the title cell take the slack so the tools cell shrinks onto its icons. */
.scs-modern .main-header-tbl td.page-title { width: 100%; }
.scs-modern .main-header-tbl td:last-child { width: 1%; white-space: nowrap; }
.scs-modern .navbar-custom-menu {
display: flex;
justify-content: flex-end;
}
.scs-modern .navbar-custom-menu > .nav.navbar-nav {
margin-left: auto;
justify-content: flex-end;
}
/* One size for everything in the group, so the row has a single optical line.
_Layout writes style="width:34px;height:34px" on the avatar itself — three
times, once per role — so this is one of the few places !important is the
only thing that works. Scoped to the header button so the 62px portrait
inside the dropdown is left alone. */
.scs-modern .navbar-custom-menu .user-menu > a > .user-image,
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li > a > img {
width: 26px !important; height: 26px !important;
margin: 0;
border-radius: 50%;
object-fit: cover;
flex: 0 0 26px;
/* The image is the only replaced element in the row; without this its
baseline, not its box, decides where it sits. */
vertical-align: middle;
display: block;
}
/* Nothing in this group may change size or position on hover or when its
dropdown opens — that is the movement being complained about, and a header
control that shifts under the pointer is hard to hit. */
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li > a,
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li.open > a,
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li > a:hover,
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li > a:focus {
height: var(--scs-header-h);
align-items: center;
transform: none;
margin: 0;
border: 0;
transition: background var(--scs-speed) ease, color var(--scs-speed) ease;
}
/* The dropdown hangs off the right edge of its own button rather than running
off the side of the window. */
.scs-modern .navbar-custom-menu > .nav.navbar-nav > li > .dropdown-menu {
left: auto;
right: 0;
}
/* ── Two boxes on /Student/CreateGroup that were painted for a light page ── */
/*
The view carries "#recipient,#grouplist { background:#f7f7f7 }" in its own
|