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 {