diff --git a/src/components/ShipmentList/ShipmentList.jsx b/src/components/ShipmentList/ShipmentList.jsx index d5692e8e406..8621b242c53 100644 --- a/src/components/ShipmentList/ShipmentList.jsx +++ b/src/components/ShipmentList/ShipmentList.jsx @@ -59,11 +59,11 @@ export const ShipmentListItem = ({ }`} data-testid="shipment-list-item-container" > -
+
{getShipmentTypeLabel(shipment.shipmentType)} {showNumber && ` ${shipmentNumber}`} - {' '} +
{showShipmentTooltip && (shipment.shipmentType === SHIPMENT_OPTIONS.HHG || @@ -84,7 +84,9 @@ export const ShipmentListItem = ({
{/* use substring of the UUID until actual shipment code is available */} {!showShipmentWeight && !showIncomplete && ( - #{shipment.shipmentLocator} +
+ #{shipment.shipmentLocator} +
)} {showIncomplete && Incomplete} {showShipmentWeight && ( @@ -115,7 +117,7 @@ export const ShipmentListItem = ({
)} {canEditOrDelete ? ( -
+
diff --git a/src/components/ShipmentList/ShipmentList.module.scss b/src/components/ShipmentList/ShipmentList.module.scss index 2e2e1cd6cc3..6210215fd83 100644 --- a/src/components/ShipmentList/ShipmentList.module.scss +++ b/src/components/ShipmentList/ShipmentList.module.scss @@ -8,36 +8,33 @@ align-items: center; border-radius: 0 5px 5px 0; border: 1px solid $base-lighter; - padding-left: 6px; - padding-right: 13px; - padding-top: 12px; - padding-bottom: 12px; + padding: 12px 12px; height: 52px; @include u-margin-bottom(1); - strong { - white-space: nowrap; - @media (min-width: $tablet) { - @include u-minw(15); - } - @include u-minw(7); - text-align: left; + .shipment-info { + flex: 1; } - &:last-child { - margin-bottom: 0px; + .shipment-buttons { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + margin: 0; } &.shipment-display { cursor: default; justify-content: start; } -} -.shipment-btns { - display: flex; - justify-content: center; - align-items: center; + @media (max-width: 768px) { + .shipment-buttons { + margin-left: 3vw; + margin-right: -3vw; + } + } } :global(.usa-button).edit-btn {