Make Stuff Better

Author: Fredthedoggy

pages/converters/chatchat/deluxechat.tsx

@@ -38,16 +38,14 @@ const Home: NextPage = () => {
                 </div>
                 <div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
+                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
                       height: calc(100vh - 15.5em);
-                      max-width: 50vw;
                     `}>
                         <TextBox title={"DeluxeChat Config"} code={config} editor={setConfig} language={"yaml"}/>
                     </div>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
+                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
                       height: calc(100vh - 15.5em);
-                      max-width: 50vw;
                     `}>
                         {
                             error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

pages/converters/chatchat/essentialschat.tsx

@@ -52,9 +52,8 @@ const Home: NextPage = () => {
                 </div>
                 <div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
+                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
                       height: calc(100vh - 15.5em);
-                      max-width: 50vw;
                     `}>
                         <div css={tw`h-1/2`}>
                         <TextBox title={"EssentialsChat Config"} code={config} editor={setConfig} language={"yaml"}/>
@@ -64,9 +63,8 @@ const Home: NextPage = () => {
                         </div>
                     </div>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
+                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
                       height: calc(100vh - 15.5em);
-                      max-width: 50vw;
                     `}>
                         {
                             error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

pages/converters/chatchat/venturechat.tsx

@@ -38,16 +38,14 @@ const Home: NextPage = () => {
                 </div>
                 <div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full max-w-full`}>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2`}
+                      ${tw`w-full md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
                       height: calc(100vh - 15.5em);
-                      max-width: 50vw;
                     `}>
                         <TextBox title={"VentureChat Config"} code={config} editor={setConfig} language={"yaml"}/>
                     </div>
                     <div css={css`
-                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
+                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
                       height: calc(100vh - 15.55em);
-                      max-width: 50vw;
                     `}>
                         {
                             error || !parsedConfig ? (<div css={tw`flex flex-col h-full w-full pt-1`}>

pages/index.tsx

@@ -8,7 +8,7 @@ function Home() {
             <meta name="description" content="HelpChat Tools"/>
         </Head>
 
-        <main css={css`${tw`flex flex-col`} height: calc(100vh - 2.75rem)`}>
+        <main css={css`${tw`flex flex-col`} height: calc(100vh - 3.5rem)`}>
             <div css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}>
                 <p css={tw`text-3xl font-bold`}>HelpChat</p>
                 <p css={tw`text-lg`}>Home</p>

pages/validators/yaml.tsx

@@ -61,20 +61,20 @@ const Home: NextPage = () => {
                 <div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
                     <div css={css`
                       height: calc(100vh - 15.5em);
-                      ${tw`md:w-1/2 p-4 pt-1 pr-2`}
+                      ${tw`md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
                     `}>
                         <TextBox title={"Yaml Config"} code={config} editor={setConfig} language={"yaml"}/>
                     </div>
                     <div css={css`
                       height: calc(100vh - 15.5em);
-                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col`}
+                      ${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
                     `}>
                         <div css={tw`flex flex-col h-full w-full pt-1`}>
                             <div css={tw`flex flex-row pl-2`}>
                                 <p css={tw`text-xl font-semibold mx-auto mb-2`}>Json Object Dump</p>
                             </div>
                             <div css={css`${tw`rounded-md overflow-auto h-full`} background-color: #2a2734`}>
-                                <div css={tw` py-2 px-4`}>
+                                <div css={tw`py-2 px-4 text-base`}>
                                     {!(error || !parsedConfig) ? <ReactJson src={parsedConfig} theme={{
                                             base00: duotoneDark.plain.backgroundColor ?? "",
                                             base01: duotoneDark.styles[2].style.color ?? "",