ChatGPT-Extrabreit-Schreibszene by mwiemeyer

/* ==UserStyle==
@name           ChatGPT-Extrabreit
@version        1
@author         Matthias Wiemeyer basierend auf m1kethai 
@description    Improves ChatGPT conversation readability by removing the narrow fixed content width and replacing it with subtle, adaptive padding for a consistent UX across all screen sizes.
@namespace      https://github.com/m1kethai/StretchGPT-Userstyle (Originalversion von m1kethai)
@preprocessor   less
@var checkbox   hideAvatars "Hide Avatars" 0

==/UserStyle== */
@-moz-document domain("chat.openai.com") {

	/* Prompt Window full width no height limit */
	.flex.w-full.items-center {
		width: 100%;
		height: auto;
	}
	/* Rest unverändert übernommen von M1kthai */
	/* MESSAGES ********************/
	/* ===== Main/Outer Div ===== */
	div.w-full {
		--pl: max(calc(1vw*1rem), 1rem);
		--pr: max(calc(1vw*1rem), 1rem);
		padding: var(--pt) var(--pr) var(--pb) var(--pl);

		@media (min-width: 768px) {
			--pt: 1.5rem;
			--pl: 2vw;
			--pr: 2vw;

			@media (min-width: 1536px) {
				--pt: min(calc(3vh*1rem), 1.5rem);
				--pl: 1.5rem;
				--pr: 1.5rem;
			}
		}

		/* ===== User Message ===== */
		&.dark\:bg-gray-800 when(@hideAvatars =1) {
			/* Reduce user messages' horiz. padding on hover to prevent absolutely positioned "edit" button from overlapping with text */
			@media (min-width: 1024px) {
				--pr: calc(1vw + 1.5rem);
				@media (min-width: 1536px) {
					--pr: calc(2vw + 2rem);
				}
			}
		}

		/* ===== ChatGPT Messages ===== */
		&:not(.dark\:bg-gray-800) {
			/* Code Container ===== */
			.bg-black.rounded-md {
				max-width: 98%;
			}
		}

		/* ===== Inner Div ===== */
		.md\:max-w-3xl.lg\:max-w-\[40rem\].xl\:max-w-\[48rem\] {
			max-width: 100% !important;
		}

		.lg\:w-\[calc\(100\%-115px\)\] {
			width: 100% !important;
		}

		> div.justify-center.m-auto {
			padding-top: 1.25rem;
			padding-bottom: 0.5rem;

			> div.flex.flex-1.mx-auto.md\:max-w-3xl, // classes when sidebar is closed
			> div.flex.mx-auto.md\:max-w-2xl.lg\:max-w-\[38rem\].xl\:max-w-3xl, // classes when sidebar is open
			> div:only-child {
				// fallback selector in case the classes change again
				max-width: 100% !important;
				padding-left: 2vw !important;
				padding-right: 2vw !important;

				@avatar-width: 24px;

				& when(@hideAvatars =0) {
					@media (max-width: 767px) {
						padding-left: 0 !important;
					}
					> div:first-child + div {
						width: calc(100% - @avatar-width) !important;
					}
				}

				& when(@hideAvatars =1) {
					> div:first-child {
						display: none;
					}
				}

				/* ===== Hide Avatars ===== */
				& when(@hideAvatars =1) {
					.markdown.prose > ol,
					.markdown.prose > ul {
						padding-left: max(calc(1vw * 1rem), 0.5rem);
					}
				}

				/* ===== Message Content Div ===== */
				> div:last-child {
					padding: 0 !important;

					div.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2 {
						&,
						> div.flex.gap-1 {
							gap: 0;
						}
						button {
							padding: 3px
						}
					}
				}
			}
		}
	}


	.m-auto {
		margin: 1% 0 1% 0;
	}
	.btn-neutral {
		--tw-bg-opacity: 1;
		background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
		border-color: rgba(0, 0, 0, .1);
		border-width: 1px;
		color: #0f0f0f;
		color: var(--text-primary);
		font-size: .875rem;
		line-height: 1.25rem;
		margin: 0 2% 0 2% !important;
		max-width: 98%;
	}
	.xl\:max-w-3xl,
	.xl\:max-w-xl,
	.xl\:max-w-2xl {
		max-width: 100%;
	}

	.text-base,
	.prose {
		line-height: 1.3;
		padding: 0;
	}
	.flex.w-full.items-center {
		width: 99%;
		height: 100%!important;
		margin: 1% 4% 1% 1%;
	}
	  #prompt-textarea {
		  max-height: none !important;
	}
}