fix(shopfloor): Manager Desk pickers — overflow + chevron + Take Over label
Two issues from the wet-WO card screenshot:
**1. Tank picker bleeding past the card's right edge**
Native <select> defaults to `box-sizing: content-box`, so my
`width:100% + padding-right:2.25rem` rendered the picker wider than
its flex slot — the second picker (Tank, on wet WOs) overflowed the
card border at the typical card width.
Fix on `.o_fp_mgr_picker`:
• `box-sizing: border-box` — keep total width inside the slot
• `min-width: 0` — let flex actually shrink it past its content
• Custom SVG chevron via background-image so we control the
indicator's position exactly (Bootstrap's native chevron sits
almost flush with the right border, which the user flagged
earlier). 1rem of clearance from the right edge.
**2. Take Over button**
Earlier I'd collapsed it to icon-only because the wet card was too
wide; user pointed out the icon alone is confusing. Restored the
"Take Over" label (with icon prefix) so both buttons read cleanly:
[👤 Take Over] [↗ Open WO]
Asset cache cleared as part of the deploy so the recompiled SCSS
+ refreshed XML template ship together. A hard browser refresh
(DevTools → Empty Cache + Hard Reload) is needed to pick them up.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -487,25 +487,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Action group sits to the RIGHT of info on wide rows. flex:1 so it
|
||||
// takes the remaining horizontal space (the dropdown then grows to
|
||||
// fill); flex-wrap so on narrow widths the dropdown sits on its own
|
||||
// line and the buttons go below at 50/50.
|
||||
.o_fp_mgr_wo_actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: $fp-space-2;
|
||||
flex: 0 0 auto;
|
||||
flex: 1 1 360px; // takes remaining width, never under 360px
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.o_fp_mgr_picker {
|
||||
min-width: 180px;
|
||||
// box-sizing matters: native <select> defaults to content-box, so
|
||||
// `width: 100% + padding-right` overflows. border-box keeps the
|
||||
// picker inside its flex slot — the Tank dropdown was bleeding
|
||||
// past the card's right edge before this.
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 220px; // grows to fill, but stays usable
|
||||
min-width: 0; // lets flex actually shrink it
|
||||
min-height: 40px;
|
||||
padding: 0 $fp-space-3;
|
||||
// Custom chevron via SVG background — controls its position
|
||||
// exactly (browsers crowd the native chevron right against the
|
||||
// edge). pe: none on chevron so the click still hits the select.
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: $fp-card;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 7L0 1l1.4-1.4L6 4.2 10.6-.4 12 1z'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
padding: 0 2.5rem 0 $fp-space-3;
|
||||
border: 1px solid #{$fp-border};
|
||||
border-radius: $fp-radius-sm;
|
||||
background-color: $fp-card;
|
||||
color: $fp-ink;
|
||||
font-size: $fp-text-sm;
|
||||
&:focus { @include fp-focus-ring; border-color: $fp-accent; }
|
||||
}
|
||||
.o_fp_mgr_btn,
|
||||
.o_fp_mgr_wo_row .btn {
|
||||
min-height: 40px;
|
||||
padding: 0 $fp-space-3;
|
||||
@@ -517,14 +537,23 @@
|
||||
color: $fp-ink;
|
||||
white-space: nowrap;
|
||||
transition: filter $fp-dur-fast $fp-ease;
|
||||
flex: 0 0 auto;
|
||||
&:hover { filter: brightness(0.95); }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
// Stack info + actions vertically on narrow viewports
|
||||
.o_fp_mgr_wo_actions { width: 100%; }
|
||||
.o_fp_mgr_picker { flex: 1 1 100%; max-width: 100%; }
|
||||
.o_fp_mgr_wo_row .btn { min-height: $fp-touch-min; }
|
||||
@media (max-width: 900px) {
|
||||
// Mobile / narrow tablet: dropdown takes full width on its own
|
||||
// line; the two buttons split 50/50 underneath.
|
||||
.o_fp_mgr_wo_actions {
|
||||
flex: 1 1 100%;
|
||||
justify-content: stretch;
|
||||
}
|
||||
.o_fp_mgr_picker { flex: 1 1 100%; }
|
||||
.o_fp_mgr_btn,
|
||||
.o_fp_mgr_wo_row .btn {
|
||||
flex: 1 1 calc(50% - #{$fp-space-2});
|
||||
min-height: $fp-touch-min;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -185,14 +185,14 @@
|
||||
</option>
|
||||
</t>
|
||||
</select>
|
||||
<button class="btn"
|
||||
<button class="btn o_fp_mgr_btn"
|
||||
t-on-click="() => this.onTakeOver(wo)"
|
||||
title="Assign yourself">
|
||||
<i class="fa fa-user"/>
|
||||
title="Assign this WO to yourself">
|
||||
<i class="fa fa-user me-1"/>Take Over
|
||||
</button>
|
||||
<button class="btn"
|
||||
<button class="btn o_fp_mgr_btn"
|
||||
t-on-click="() => this.openRecord('mrp.workorder', wo.id)">
|
||||
Open WO
|
||||
<i class="fa fa-external-link me-1"/>Open WO
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user