From a885a1faffc71b30d5adf0da935e08efda7e0dcf Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Mon, 1 Aug 2022 03:27:34 -0700
Subject: [PATCH] fix(list): Fixed layout of list variants.

PiperOrigin-RevId: 464498232
---
 list/lib/_tokens.scss                   | 2 +-
 list/lib/image/_list-item-image.scss    | 2 ++
 list/lib/listitem/_list-item-theme.scss | 6 +++---
 list/lib/listitem/_list-item.scss       | 2 --
 list/lib/video/_list-item-video.scss    | 4 ++++
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/list/lib/_tokens.scss b/list/lib/_tokens.scss
index aa5945a2ca..b1c72e2165 100644
--- a/list/lib/_tokens.scss
+++ b/list/lib/_tokens.scss
@@ -11,7 +11,7 @@
     list-item-one-line-container-height: 56px,
     list-item-two-line-container-height: 72px,
     list-item-three-line-container-height: 88px,
-    list-item-container-color: transparent,
+    list-item-container-color: #fff,
     list-item-label-text-font: string.unquote('Roboto, sans-serif'),
     list-item-label-text-size: 16px,
     list-item-label-text-tracking: 0.03125rem,
diff --git a/list/lib/image/_list-item-image.scss b/list/lib/image/_list-item-image.scss
index 1159622ee3..0358aa195c 100644
--- a/list/lib/image/_list-item-image.scss
+++ b/list/lib/image/_list-item-image.scss
@@ -9,6 +9,8 @@
 @mixin static-styles() {
   .md3-list-item__image {
     display: inline-flex;
+    margin-block-end: 8px;
+    margin-block-start: 8px;
     margin-inline-start: 16px;
   }
 }
diff --git a/list/lib/listitem/_list-item-theme.scss b/list/lib/listitem/_list-item-theme.scss
index 9785193ce4..b1efc4a6b0 100644
--- a/list/lib/listitem/_list-item-theme.scss
+++ b/list/lib/listitem/_list-item-theme.scss
@@ -298,19 +298,19 @@ $light-theme: tokens.md-comp-list-values();
 
 @mixin _set-one-line-container-height($height) {
   &.md3-list-item--with-one-line {
-    height: $height;
+    min-height: $height;
   }
 }
 
 @mixin _set-two-line-container-height($height) {
   &.md3-list-item--with-two-line {
-    height: $height;
+    min-height: $height;
   }
 }
 
 @mixin _set-three-line-container-height($height) {
   &.md3-list-item--with-three-line {
-    height: $height;
+    min-height: $height;
   }
 }
 
diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
index 13604670bd..cd38666061 100644
--- a/list/lib/listitem/_list-item.scss
+++ b/list/lib/listitem/_list-item.scss
@@ -43,8 +43,6 @@
   align-items: center;
   box-sizing: border-box;
   display: flex;
-  padding-block-end: 12px;
-  padding-block-start: 12px;
   width: 100%;
   position: relative;
 
diff --git a/list/lib/video/_list-item-video.scss b/list/lib/video/_list-item-video.scss
index 82ec934409..336687cb0e 100644
--- a/list/lib/video/_list-item-video.scss
+++ b/list/lib/video/_list-item-video.scss
@@ -7,8 +7,12 @@
 // Selector '.md3-*' should only be used in this project.
 
 @mixin static-styles() {
+  display: inline-flex;
+
   .md3-list-item__video {
     display: inline-flex;
+    margin-block-end: 12px;
+    margin-block-start: 12px;
     object-fit: cover;
   }
 }