GPThemes Customization: Fix broken style of the Font tab section and overall UI improvements for different screen sizes

src/js/app/mainFonts.js

@@ -57,7 +57,7 @@ const lineHeightData = {
 }
 
 const letterSpacingData = {
-	name: 'Letter Spacing',
+	name: 'Letter Space',
 	className: 'fonts__letterSpacing',
 	inputId: 'letterSpacing',
 	inputType: 'number',
@@ -72,22 +72,25 @@ const letterSpacingData = {
 let renderFontsTab = `
   <section id="fontChangerPopover" class="fonts">
     <div class="fonts__props">
-      <div class="fonts__family fonts__group card card--big h-full">
-        <label for="fontFamily" class="grid gap-1 h-full w-full">
-          <div>
-            <p class="card__unit card__icon">T</p>
-            <p class="card__name uppercase font-semibold">FONT FAMILY</p>
-          </div>
-          <select id="fontFamily" class="border-none outline-none focus:none font-bold">
-            ${FONT_NAMES.map(
-				(name) => `<option value="${name === 'Default' ? DEFAULTS.fontFamily : name}">${name}</option>`
-			).join('')}
-          </select>
-        </label>
-      </div>
-      ${renderFontBigCard(fontSizeData)}
-      ${renderFontSmallCard(lineHeightData)}
-      ${renderFontSmallCard(letterSpacingData)}
+	<div class="fonts__bigcards-wrapper">
+		<div class="fonts__family fonts__group card card--big h-full">
+			<label for="fontFamily" class="grid gap-1 h-full w-full">
+			<div>
+				<p class="card__unit card__icon">T</p>
+				<p class="card__name uppercase font-semibold">FONT FAMILY</p>
+			</div>
+			<select id="fontFamily" class="border-none outline-none focus:none font-bold">
+				${FONT_NAMES.map((name) => `<option value="${name === 'Default' ? DEFAULTS.fontFamily : name}">${name}</option>`).join(
+					''
+				)}
+			</select>
+			</label>
+		</div>
+		${renderFontBigCard(fontSizeData)}</div>
+	<div class="fonts__smallcards-wrapper">
+		${renderFontSmallCard(lineHeightData)}
+		${renderFontSmallCard(letterSpacingData)}
+	</div>
     </div>
     <footer class="grid mt-10">
       ${renderButton({ id: 'resetFont', content: 'Reset Fonts', disabled: false, className: 'btn-primary' })}

src/js/app/settingsManager.js

@@ -20,10 +20,10 @@ async function createSettings() {
     </header>
     <main>
       <div class="tabs">
-        <div class="tab-buttons flex items-center rounded-full p-1 font-semibold mb-10">
-          <button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full active">Color</button>
-          <button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full">Font</button>
-          <button class="tab-button py-2 px-4 focus:outline-none text-center rounded-full">Width</button>
+        <div class="tab-buttons p-1 font-semibold mb-10">
+          <button class="tab-button py-2 px-4 focus:outline-none text-center active">Color</button>
+          <button class="tab-button py-2 px-4 focus:outline-none text-center">Font</button>
+          <button class="tab-button py-2 px-4 focus:outline-none text-center">Width</button>
         </div>
         <div class="tab-content">
           <div class="tab-pane active" id="tab-colors">${renderColorsTab}</div>

src/sass/abstract/_bp.scss

@@ -1,4 +1,6 @@
 // Tailwind CSS breakpoints converted to em units
+$xxs: 20em; // px
+$xs: 31.25em; // px
 $sm: 40em; // 640px
 $md: 48em; // 768px
 $lg: 64em; // 1024px
@@ -7,6 +9,18 @@ $xxl: 96em; // 1536px
 
 // Mixins using Tailwind's breakpoints
 @mixin dev($bp) {
+    @if $bp =='xxs' {
+        @media (max-width: #{$xxs}) {
+            @content;
+        }
+    }
+
+    @if $bp =='xs' {
+        @media (max-width: #{$xs}) {
+            @content;
+        }
+    }
+
     @if $bp =='sm' {
         @media (max-width: #{$sm}) {
             @content;

src/sass/gpthemes/_gpth-settings.scss

@@ -1,21 +1,25 @@
 .gpth-settings {
-	overflow: clip;
+	--w-scrollbar: 0.2rem;
+
 	--top: calc(var(--h-header) + 0.5rem + 3rem);
 	--right: 1.3rem;
+	--p: 2.2rem 2.8rem;
+	--max-h: 75vh;
 	--shadow-color: hsla(var(--accent-hsl) / 0.09);
 	--shadow-values: inset 0 0 20px 10px;
 	opacity: 0;
 	pointer-events: none;
-	padding: 2.2rem 2.8rem;
+	padding: var(--p);
 	border-radius: var(--br-dialog);
 	top: var(--top);
 	right: var(--right);
-	width: clamp(24rem, 25vw, 30rem);
-	max-height: 70vh;
+	width: clamp(25rem, 25vw, 30rem);
+	max-height: var(--max-h);
+
 	transform: translateX(calc(100% + 1.5rem)) !important;
 	z-index: calc(var(--z-modal) + 10);
 	background-color: var(--c-bg-sidebar);
-	overflow-y: scroll;
+	overflow: clip scroll;
 
 	// background-image: linear-gradient(
 	// 	135deg,
@@ -36,9 +40,23 @@
 		transform: translateX(0%) !important;
 	}
 
-	@include dev('sm') {
+	@include dev('xs') {
+		--p: 5.5vw;
+		--max-h: 70vh;
 		width: calc(100% - 2.5rem);
-		max-height: 70vh;
-		padding: 2rem;
+	}
+
+	@include dev('xxs') {
+		--p: 4vw;
+	}
+
+	// section {
+	.tab-content {
+		overflow-y: scroll;
+		max-height: calc(var(--max-h) / 1.7);
+
+		.tab-pane {
+			margin-inline: 0.2rem; // simulate space from the scrollbar
+		}
 	}
 }

src/sass/gpthemes/theme-manager/components/_cards.scss

@@ -4,10 +4,16 @@
     font-size: 1.6rem;
     position: relative;
 
+
     @include dev('sm') {
         font-size: 1.4rem;
     }
 
+    /* this fix some crazy long width in v4.0.4 */
+    input {
+        max-width: max-content;
+    }
+
     input,
     select,
     label {

src/sass/gpthemes/theme-manager/components/_fonts.scss

@@ -1,10 +1,17 @@
 .fonts {
     &__props {
+        display: grid;
+        gap: 1.5rem;
+    }
+
+    &__bigcards-wrapper,
+    &__smallcards-wrapper {
         --gap: 0.65rem;
 
+        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
         display: grid;
-        grid-template-columns: repeat(2, 1fr);
         align-items: center;
-        gap: calc(var(--gap) * 2) var(--gap);
+        // gap: calc(var(--gap) * 2) var(--gap);
+        gap: var(--gap);
     }
 }

src/sass/gpthemes/theme-manager/components/_switch.scss

@@ -12,13 +12,22 @@
     border: 1px solid transparent;
     transition: .25s ease-in;
 
+    @include dev('xxs') {
+        display: grid;
+        gap: 1rem 0.5rem;
+        grid-template-areas:
+            'icon . checkbox'
+            'text text text';
+    }
+
     &:hover {
         // background-image: var(--c-bg-gradient);
         background-color: hsla(var(--accent-hsl) / 0.1);
         border-color: hsla(var(--accent-hsl) / 0.1) !important;
         transform: scale(0.98);
     }
 
+
     &__icon {
         --icon-size: 2.8em;
         --svg-muliplicator: 0.6;
@@ -34,6 +43,10 @@
             width: calc(var(--icon-size) * var(--svg-muliplicator));
             height: calc(var(--icon-size) * var(--svg-muliplicator));
         }
+
+        @include dev('xxs') {
+            grid-area: icon;
+        }
     }
 
     &__text {
@@ -55,6 +68,10 @@
             line-height: 1.25;
             font-weight: 400;
         }
+
+        @include dev('xxs') {
+            grid-area: text;
+        }
     }
 
     &__checkbox {
@@ -108,5 +125,9 @@
                 background-color: var(--c-on-accent);
             }
         }
+
+        @include dev('xxs') {
+            grid-area: checkbox;
+        }
     }
 }

src/sass/gpthemes/theme-manager/components/_tabs.scss

@@ -1,28 +1,22 @@
-// .tab-pane {
-//     display: none;
-// }
-
-// .tab-pane.active {
-//     display: block;
-// }
-
-// .tab-pane:target {
-//     display: block;
-//     @extend %animFadeIn;
-// }
-
-// .tab-button.active {
-//     background-color: var(--c-accent);
-//     color: var(--c-on-accent);
-// }
-
 .tab-buttons {
     background-color: hsla(var(--accent-hsl) / 0.15);
     color: var(--c-accent);
+    display: flex;
+    align-items: center;
+    border-radius: 100vw;
+
+    @include dev('xxs') {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+        border-radius: 1rem;
+    }
+
 }
 
 .tab-button {
     flex: 1;
+    border-radius: inherit;
 
     &.active {
         background-color: var(--c-accent);

src/sass/gpthemes/theme-manager/layouts/_gpth-assets.scss

@@ -1,7 +1,7 @@
 .gpth-assets {
     &__custom-width {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
         gap: 1rem 0.5rem;
     }
 }