Migrate some CSS to nested

src/app/(drift)/(posts)/components/tabs/tabs.module.css

@@ -8,6 +8,12 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
+
+	@media (max-width: 600px) {
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
 }
 
 .list {
@@ -52,11 +58,3 @@
 	color: var(--darkest-gray);
 	box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
 }
-
-@media (max-width: 600px) {
-	.listWrapper {
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: flex-start;
-	}
-}

src/app/(drift)/(posts)/new/components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css

@@ -1,23 +1,16 @@
 .actionWrapper {
 	position: relative;
-    z-index: 1;
+	z-index: 1;
-}
 
-.actionWrapper .actions {
+	.actions {
+		/* small screens, top: 0 */
+		@media (max-width: 767px) {
+			top: 0;
+		}
 
-}
+		@media (max-width: 768px) {
-
+			position: relative;
-/* small screens, top: 0 */
+			margin-left: 0 !important;
-@media (max-width: 767px) {
+		}
-	.actionWrapper .actions {
-		top: 0;
-	}
-}
-
-
-@media (max-width: 768px) {
-	.actionWrapper .actions {
-		position: relative;
-		margin-left: 0 !important;
 	}
 }

src/app/(drift)/(posts)/new/components/title/title.module.css

@@ -4,10 +4,8 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: inherit;
-}
 
-@media screen and (max-width: 650px) {
+	@media screen and (max-width: 650px) {
-	.title {
 		align-items: flex-start;
 		flex-direction: column;
 	}

src/app/(drift)/admin/components/table.module.css

@@ -2,10 +2,10 @@
 	width: 100%;
 	display: block;
 	white-space: nowrap;
-}
 
-.table thead th {
+	thead th {
-	font-weight: bold;
+		font-weight: bold;
+	}
 }
 
 .id {

src/app/(drift)/settings/components/sections/api-keys.module.css

@@ -4,22 +4,22 @@
 	gap: var(--gap);
 	max-width: 350px;
 	margin-top: var(--gap);
-}
+	/* fieldset contains an input and button. I want button to be small next to input */
 
-/* fieldset contains an input and button. I want button to be small next to input */
+	.fieldset {
-.form .fieldset {
+		display: flex;
-	display: flex;
+		flex-direction: row;
-	flex-direction: row;
+		gap: var(--gap);
-	gap: var(--gap);
+		border: none;
-	border: none;
+		padding: 0;
-	padding: 0;
+		margin: 0;
-	margin: 0;
+	}
-}
 
-.tokens {
+	.tokens {
-	margin-top: var(--gap);
+		margin-top: var(--gap);
-}
 
-.tokens table thead th {
+		table thead th {
-	text-align: left;
+			text-align: left;
+		}
+	}
 }

src/app/components/card/card.module.css

@@ -5,11 +5,10 @@
 	border: 1px solid var(--light-gray);
 	width: 100%;
 	height: 100%;
-}
 
-
+	.content {
-.card .content {
+		padding: var(--gap);
-    padding: var(--gap);
+		width: 100%;
-    width: 100%;
+		height: auto;
-    height: auto;
+	}
 }

src/app/components/layout/page.module.css

@@ -6,15 +6,13 @@
 	width: 100%;
 	height: auto;
 	margin: 0 auto;
+
+	/* 55rem == --main-content */
+	@media screen and (max-width: 55rem) {
+		padding: 0 1rem;
+	}
 }
 
 .forSites {
 	margin-top: var(--gap);
 }
-
-/* 55rem == --main-content */
-@media screen and (max-width: 55rem) {
-	.page {
-		padding: 0 1rem;
-	}
-}

src/app/components/post-list/list-item.module.css

@@ -46,26 +46,27 @@
 	}
 }
 
-.files li {
+.files {
-	display: flex;
+	li {
-	align-items: center;
+		display: flex;
-	gap: var(--gap);
+		align-items: center;
-	padding: var(--gap-quarter);
+		gap: var(--gap);
-}
+		padding: var(--gap-quarter);
+	}
 
-.files li a {
+	li a {
-	display: flex;
+		display: flex;
-	align-items: center;
+		align-items: center;
-	gap: var(--gap);
+		gap: var(--gap);
-	color: var(--darker-gray);
+		color: var(--darker-gray);
-}
+	}
 
-.files li a:hover {
+	li a:hover {
-	color: var(--link);
+		color: var(--link);
-	text-decoration: none;
+		text-decoration: none;
-}
+	}
 
-.files li a svg {
+	li a svg {
-	color: inherit;
+		color: inherit;
+	}
 }
-

src/app/components/post-list/post-list.module.css

@@ -1,15 +1,22 @@
-.container ul {
+.container {
-	list-style: none;
+	ul {
-	padding: 0;
+		list-style: none;
-	margin: 0;
+		padding: 0;
-}
+		margin: 0;
+		margin-top: 0.5rem;
 
-.container > * {
+		@media (max-width: 768px) {
-	width: 100%;
+			padding: 0 var(--gap);
-}
+		}
+	}
 
-.container ul li {
+	ul li {
-	padding: 0.5rem 0;
+		padding: 0.5rem 0;
+	}
+
+	> * {
+		width: 100%;
+	}
 }
 
 .postHeader {
@@ -31,9 +38,3 @@
 	gap: var(--gap-half);
 	margin-bottom: var(--gap);
 }
-
-@media (max-width: 768px) {
-	.container ul {
-		padding: 0 var(--gap);
-	}
-}