2.1.1 (Mastodon v4.5.0-nightly.2025-08-06-security)

- Fixes posts padding in notifications
- Fixed embeds collapsing upon opening
- Fixes up the compose box from Masto's dropdown position change
	!! This change was done in a more recent Mastodon commit (49a6e4cbb5f0a30a52162b65b1046b99d29faccc)
	   You will not see this change until these changes were pulled to your instance

modern.css

@@ -497,12 +497,6 @@ a:focus-visible,
   max-height: unset !important;
   height: 100%;
 }
-.compose-panel > * {
-  padding-inline: 0;
-}
-.compose-panel > .navigation-bar {
-  padding-top: 0 !important;
-}
 .compose-panel .search,
 .drawer .search {
   margin-bottom: 25px;
@@ -517,15 +511,9 @@ a:focus-visible,
   border-radius: var(--radius);
   margin-inline: -5px;
 }
-.search label {
-  box-sizing: border-box;
-}
 .search input {
   border-radius: var(--radius-round) !important;
 }
-.search .search__icon > i {
-  margin-inline: 5px;
-}
 .search__popout {
   border-radius: var(--radius);
   animation: scaleIn 0.2s;
@@ -534,78 +522,36 @@ a:focus-visible,
   margin-inline: 4px;
   width: calc(100% - 8px);
 }
-.navigation-bar .icon-button {
-  width: auto !important;
-  height: auto !important;
-  padding: 8px;
-}
 .compose-form {
   min-height: unset;
   overflow: unset;
   gap: 15px;
   flex: 1 0 auto !important;
 }
-.compose-form > * {
-  margin: 0 !important;
-}
-.compose-form > [aria-hidden="true"] {
-  display: none;
-}
-.compose-form > .navigation-bar {
-  margin-top: 10px;
-}
-.compose-form .reply-indicator {
-  position: relative;
-  transition: min-height 0.1s;
-}
-.compose-form .reply-indicator__display-name {
-  padding: 0;
-}
 .compose-form .spoiler-input__border {
   display: none;
 }
 .compose-form #cw-spoiler-input {
   padding-inline: 12px;
 }
-.compose-form .compose-form__autosuggest-wrapper,
-.compose-form .autosuggest-textarea__textarea {
-  border-radius: var(--radius) var(--radius) 0 0 !important;
-  border-bottom: 0;
-}
-.compose-form .compose-form__buttons-wrapper {
-  border-radius: 0 0 var(--radius) var(--radius) !important;
-}
-.compose-form .compose-form__publish-button-wrapper {
-  overflow: visible !important;
-  max-width: 100%;
-  padding: 0;
-}
-.compose-form .compose-form__upload__actions {
-  z-index: 5;
-  position: relative;
-}
-.compose-form .compose-form__upload__actions button {
-  background: none;
-}
 .compose-form .compose-form__upload__thumbnail {
   display: flex;
   flex-direction: column;
 }
+.compose-form .compose-form__upload__actions {
+  z-index: 10;
+}
 .compose-form .compose-form__upload__warning {
   position: relative;
   flex-grow: 1;
   display: flex;
 }
-.compose-form .compose-form__upload__warning button {
-  margin-top: auto;
-}
 .compose-form .compose-form__upload__warning button.active {
   box-shadow: 0 0 0 100px rgba(0,0,0,0.75);
   width: 100%;
   height: 100%;
   font-weight: bold;
   font-size: 1.1em;
-  color: inherit;
   transition: background 0.2s, transform 0.2s cubic-bezier(0, 0, 0, 1) !important;
 }
 .compose-form .compose-form__upload__warning button.active svg {
@@ -618,16 +564,33 @@ a:focus-visible,
 }
 .compose-form__highlightable {
   border-radius: var(--radius);
-  overflow: visible !important;
+/* 			.character-counter {
+      position absolute
+      inset-inline-end 0
+      bottom calc(100%)
+      padding 4px
+      font-size 13px
+    } */
 }
-.compose-form__highlightable #cw-spoiler-input {
+.compose-form__highlightable > .compose-form__dropdowns button {
-  border-radius: 0 !important;
+  border: 0;
+  padding: 4px;
+  transition: background 0.2s;
 }
-.compose-form__highlightable textarea {
+.compose-form__highlightable > .compose-form__dropdowns button::after {
-  background: none !important;
+  content: "";
+  border: 0.3em solid currentcolor;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  transform: rotate(45deg);
+  margin-top: -0.2em;
+  margin-inline: 0px 2px;
 }
-.compose-form__highlightable .compose-form__dropdowns {
+.compose-form__highlightable > .compose-form__dropdowns button:hover:not(.active) {
-  max-width: calc(100% - 7ch);
+  background: var(--hover-color);
+}
+.compose-form__highlightable .compose-form__dropdowns + .autosuggest-textarea textarea {
+  padding-top: 0;
 }
 .compose-form__highlightable .compose-form__actions {
   position: relative;
@@ -636,30 +599,28 @@ a:focus-visible,
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  gap: 0;
+  gap: 4px;
   flex-grow: 9999;
 }
-.compose-form__highlightable .compose-form__buttons * {
+.compose-form__highlightable .compose-form__buttons :not(.character-counter) {
   display: flex;
+  justify-content: center;
   flex-grow: 1;
+  aspect-ratio: 1;
+  padding: 0;
+  border-radius: 6px;
 }
 .compose-form__highlightable .compose-form__buttons label {
-  display: none;
+  display: none !important;
 }
-.compose-form__highlightable .compose-form__buttons button {
+.compose-form__highlightable .compose-form__buttons .character-counter {
-  flex-grow: 1;
+  flex-grow: 0;
-  padding: 5px;
+  min-width: 4ch;
+  padding-inline: 10px 4px;
 }
 .compose-form__highlightable .compose-form__submit button {
   padding: 8px 16px;
 }
-.compose-form__highlightable .character-counter {
-  position: absolute;
-  inset-inline-end: 0;
-  bottom: calc(100% + 12px);
-  padding: 4px;
-  font-size: 13px;
-}
 .server-banner .server-banner__hero {
   border-radius: var(--radius);
   width: 100%;
@@ -1409,10 +1370,6 @@ a:focus-visible,
 .status-card:not(.expanded) .status-card__image img {
   border-radius: 0;
 }
-.status-card:not(.interactive) .status-card__image {
-  position: relative;
-  aspect-ratio: unset !important;
-}
 .status-card__content {
   margin-block: auto;
   padding: 15px;
@@ -1424,7 +1381,6 @@ a:focus-visible,
 }
 .status-card__title {
   font-size: 1em;
-  margin-top: 0.2em;
   margin-bottom: 0;
   line-height: 1.4;
 }
@@ -1605,12 +1561,8 @@ a:focus-visible,
   background: var(--elevated-color);
   color: inherit;
 }
-.notification-ungrouped {
-  padding: 0;
-}
 .notification-ungrouped__header {
-  padding-top: 16px;
+  margin-bottom: 10px;
-  margin-bottom: 0;
 }
 .notification-ungrouped .status__wrapper {
   margin-inline: 0;
@@ -1620,9 +1572,6 @@ a:focus-visible,
 .notification-ungrouped .status__wrapper::after {
   content: unset;
 }
-.notification-ungrouped .status {
-  padding: 16px;
-}
 .notification-group {
   padding: 16px;
 }

modern.user.css

@@ -6,14 +6,17 @@
 // textbox in the left panel following this format:
 // *://domain.tld/*
 
-/* Update 2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)
+/* Update 2.1.1 (v4.5.0-nightly.2025-08-06-security)
-- Fixes the mobile UI with Masto's new navbar
+- Fixes posts padding in notifications
-- Alt text modals are larger again
+- Fixed embeds collapsing upon opening
+- Fixes up the compose box from Masto's dropdown position change
+	!! This change was done in a more recent Mastodon commit (49a6e4cbb5f0a30a52162b65b1046b99d29faccc)
+	   You will not see this change until these changes were pulled to your instance
 */
 
 /* ==UserStyle==
 @name			MastoModern
-@version		2.1.0
+@version		2.1.1
 @description	Improves the look & feel of Mastodon
 @updateURL		https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
 @homepageURL	https://git.gay/Freeplay/Mastodon-Modern
@@ -355,12 +358,6 @@
 			box-sizing border-box
 			max-height unset !important
 			height 100%
-			> * {
-				padding-inline 0
-			}
-			> .navigation-bar {
-				padding-top 0 !important
-			}
 			.search, /.drawer .search {
 				margin-bottom 25px
 			}
@@ -374,16 +371,9 @@
 		.search {
 			border-radius var(--radius)
 			margin-inline -5px
-			label {
-				// padding-inline 20px
-				box-sizing border-box
-			}
 			input {
 				border-radius var(--radius-round) !important
 			}
-			.search__icon > i {
-				margin-inline 5px
-			}
 			/.search__popout {
 				border-radius var(--radius)
 				animation scaleIn .2s
@@ -393,78 +383,34 @@
 				width calc(100% - 8px)
 			}
 		}
-		.navigation-bar {
-			.icon-button {
-				width auto !important
-				height auto !important
-				padding 8px
-			}
-		}
 		.compose-form {
 			min-height unset
 			overflow unset
 			gap 15px
 			flex 1 0 auto !important
-			> * {
-				margin 0 !important
-			}
-			> [aria-hidden="true"] {
-				display none
-			}
-			> .navigation-bar {
-				margin-top 10px
-			}
-			.reply-indicator {
-				position relative
-				transition min-height .1s
-			}
-			.reply-indicator__display-name {
-				padding 0
-			}
 			.spoiler-input__border {
 				display none
 			}
 			#cw-spoiler-input {
 				padding-inline 12px
 			}
-			.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { 
-				border-radius var(--radius) var(--radius) 0 0 !important
-				border-bottom 0
-			}
-			.compose-form__buttons-wrapper {
-				border-radius 0 0 var(--radius) var(--radius) !important
-			}
-			.compose-form__publish-button-wrapper {
-				overflow visible !important
-				max-width 100%
-				padding 0
-			}
-			.compose-form__upload__actions {
-				z-index 5
-				position relative
-				button {
-					background none
-				}
-			}
 			.compose-form__upload__thumbnail {
 				display flex
 				flex-direction column
 			}
+			.compose-form__upload__actions {
+				z-index 10
+			}
 			.compose-form__upload__warning {
-				//display contents
 				position relative
 				flex-grow 1
 				display flex
-				button {
-					margin-top auto
-				}
 				button.active {
 					box-shadow 0 0 0 100px rgba(0,0,0,0.75)
 					width 100%
 					height 100%
 					font-weight bold
 					font-size 1.1em
-					color inherit
 					transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important
 					svg {
 						height 1.2em
@@ -478,15 +424,27 @@
 		}
 		.compose-form__highlightable {
 			border-radius var(--radius)
-			overflow visible !important
+			> .compose-form__dropdowns {
-			#cw-spoiler-input {
+				button {
-				border-radius 0 !important
+					border 0
+					padding 4px
+					transition background .2s
+					&::after {
+						content: "";
+						border: .3em solid currentcolor;
+						border-top-color: transparent;
+						border-left-color: transparent;
+						transform: rotate(45deg);
+						margin-top: -.2em;
+						margin-inline: 0px 2px;
+					}
+					&:hover:not(.active) {
+						background var(--hover-color)
+					}
+				}
 			}
-			textarea {
+			.compose-form__dropdowns + .autosuggest-textarea textarea {
-				background none !important
+				padding-top 0
-			}
-			.compose-form__dropdowns {
-				max-width calc(100% - 7ch)
 			}
 			.compose-form__actions {
 				position relative
@@ -495,18 +453,23 @@
 				display flex
 				flex-wrap wrap
 				flex-direction row
-				gap 0
+				gap 4px
 				flex-grow 9999
-				* {
+				:not(.character-counter) {
 					display flex
+					justify-content center
 					flex-grow 1
+					aspect-ratio 1
+					padding 0
+					border-radius 6px
 				}
 				label {
-					display none
+					display none !important
 				}
-				button {
+				.character-counter {
-					flex-grow 1
+					flex-grow: 0;
-					padding 5px
+					min-width: 4ch;
+					padding-inline: 10px 4px;
 				}
 			}
 			.compose-form__submit {
@@ -514,13 +477,13 @@
 					padding 8px 16px
 				}
 			}
-			.character-counter {
+/* 			.character-counter {
 				position absolute
 				inset-inline-end 0
-				bottom calc(100% + 12px)
+				bottom calc(100%)
 				padding 4px
 				font-size 13px
-			}
+			} */
 		}
 
 		//// SERVER INFO
@@ -1323,10 +1286,6 @@
 					border-radius 0
 				}
 			}
-			&:not(.interactive) .status-card__image {
-				position relative
-				aspect-ratio unset !important
-			}
 			/.status-card__content {
 				margin-block auto
 				padding 15px
@@ -1338,7 +1297,6 @@
 			}
 			/.status-card__title {
 				font-size 1em
-				margin-top .2em
 				margin-bottom 0
 				line-height 1.4
 			}
@@ -1527,10 +1485,8 @@
 
 	//// NOTIFICATIONS
 	.notification-ungrouped {
-		padding 0
 		/.notification-ungrouped__header {
-			padding-top 16px
+			margin-bottom 10px
-			margin-bottom 0
 		}
 		.status__wrapper {
 			margin-inline 0
@@ -1539,9 +1495,6 @@
 				content unset
 			}
 		}
-		.status {
-			padding 16px
-		}
 	}
 	.notification-group {
 		padding 16px
@@ -2963,5 +2916,5 @@
 	}
 
 }
-
+ 
 }