padding

listify-client/src/app/lists/list-detail/list-detail.component.scss

@@ -2,8 +2,10 @@
   display: grid;
   gap: 1rem;
   width: min(100%, 760px);
+  max-width: 100%;
   margin: 0 auto;
   padding: 1rem;
+  overflow-x: hidden;
 }
 
 .detail-header {
@@ -11,6 +13,7 @@
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .detail-header h1 {
@@ -30,6 +33,8 @@
 .state-card,
 .editor-card,
 .items-card {
+  min-width: 0;
+  max-width: 100%;
   border-radius: 8px;
   background: color-mix(in srgb, var(--mat-sys-surface-container-low) 94%, white);
 }
@@ -48,11 +53,13 @@
 .item-form {
   display: grid;
   gap: 0.75rem;
+  min-width: 0;
   padding-top: 0.75rem;
 }
 
 .list-form mat-form-field,
 .item-form mat-form-field {
+  min-width: 0;
   width: 100%;
 }
 
@@ -109,6 +116,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.35rem 0.5rem;
+  min-width: 0;
   padding: 0.5rem;
   border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 8px;

listify-client/src/app/lists/lists.component.scss

@@ -1,10 +1,12 @@
 .list-controls {
   display: grid;
   gap: 0.75rem;
+  min-width: 0;
   margin: 0 0 1rem;
 }
 
 .list-controls mat-form-field {
+  min-width: 0;
   width: 100%;
 }
 
@@ -15,16 +17,19 @@
 .filter-row {
   display: grid;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .status-row {
   display: grid;
   gap: 0.65rem;
+  min-width: 0;
 }
 
 .status-row mat-button-toggle-group {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  min-width: 0;
   width: 100%;
   border-radius: 8px;
 }
@@ -33,6 +38,11 @@
   min-width: 0;
 }
 
+.status-row mat-button-toggle,
+.status-row button {
+  max-width: 100%;
+}
+
 .status-row button {
   justify-self: start;
 }

listify-client/src/app/workspace-page.scss

@@ -1,7 +1,9 @@
 .workspace-page {
   width: min(100%, 1120px);
+  max-width: 100%;
   margin: 0 auto;
   padding: 1rem;
+  overflow-x: hidden;
 }
 
 .page-header {
@@ -10,9 +12,11 @@
   flex-direction: column;
   gap: 1rem;
   margin-bottom: 1rem;
+  min-width: 0;
 }
 
 .page-header h1 {
+  overflow-wrap: anywhere;
   margin: 0;
   font-size: 1.6rem;
   font-weight: 500;
@@ -67,20 +71,30 @@
 .template-grid {
   display: grid;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .template-card {
+  min-width: 0;
+  max-width: 100%;
   border-radius: 8px;
   background: color-mix(in srgb, var(--mat-sys-surface-container-low) 94%, white);
 }
 
 .template-card mat-card-header {
+  min-width: 0;
   padding-bottom: 0.35rem;
 }
 
+.template-card mat-card-title,
+.template-card mat-card-subtitle {
+  overflow-wrap: anywhere;
+}
+
 .template-description {
   margin: 0.5rem 0 0;
   color: var(--mat-sys-on-surface-variant);
+  overflow-wrap: anywhere;
 }
 
 .template-meta {
@@ -96,6 +110,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
+  min-width: 0;
 }
 
 .template-meta mat-icon {

listify-client/src/styles.scss

@@ -19,6 +19,12 @@ html {
   );
 }
 
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 body {
   // Default the application to a light color theme. This can be changed to
   // `dark` to enable the dark color theme, or to `light dark` to defer to the