feat(UI): make the script language menu wider with more columns

hatemhosny · hatemhosny · commit 2b3c2eba59c4 · 2025-04-23T11:55:10.000+02:00
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -629,7 +629,7 @@ a#result-button {
   display: none !important;
 }
 
-@media only screen and (max-width: 1179px) {
+@media only screen and (max-width: 1024px) {
   #toolbar {
     .menu {
       justify-content: center;
@@ -649,20 +649,16 @@ a#result-button {
     .dropdown-menu {
       font-size: var(--s14);
     }
-  }
-
-  #custom-settings-btn {
-    display: none;
-  }
-}
 
-@media only screen and (max-width: 1024px) {
-  #toolbar {
     .toolbar-render .button {
       margin: 0;
       width: 24px;
     }
   }
+
+  #custom-settings-btn {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 768px) {
@@ -1526,7 +1522,7 @@ a.editor-title {
 
   a {
     display: block !important;
-    max-width: 135px;
+    max-width: 150px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap !important;
diff --git a/src/livecodes/styles/inc-menu.scss b/src/livecodes/styles/inc-menu.scss
@@ -73,7 +73,7 @@
     }
   }
 
-  @media only screen and (max-width: 1179px) {
+  @media only screen and (max-width: 1024px) {
     #app-menu-container-settings {
       inset-inline-start: calc(var(--logo-width) + var(--icon-width));
     }
@@ -163,7 +163,7 @@
 .menu-scroller-script {
   right: 0;
   transform: translateX(50%);
-  width: 700%;
+  width: 900%;
 }
 
 .dropdown-menu-markup,
@@ -173,7 +173,7 @@
 }
 
 .dropdown-menu-script {
-  column-count: 3;
+  column-count: 4;
   column-rule: 1px solid var(--menu-split-color);
 }
 
@@ -361,6 +361,13 @@ i.arrow {
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .menu-scroller-script {
+    transform: translateX(35%);
+    width: 850%;
+  }
+}
+
 @media only screen and (max-width: 768px) {
   .menu-scroller {
     max-width: 90vw;
@@ -386,6 +393,10 @@ i.arrow {
     transform: translateX(-1vw);
   }
 
+  .dropdown-menu-script {
+    column-count: 3;
+  }
+
   .dropdown-menu.submenu {
     left: 50%;
     margin: 0;
@@ -410,7 +421,7 @@ i.arrow {
     height: calc(100vh - (var(--toolbar-height) * 2));
     max-width: 98vw;
     position: fixed;
-    top: calc(var(--toolbar-height) * 2);
+    top: calc((var(--toolbar-height) * 2) - 4px);
     transform: translateX(-1vw);
 
     > .dropdown-menu {

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`
`76`		`- @media only screen and (max-width: 1179px) {`
	`76`	`+ @media only screen and (max-width: 1024px) {`
`77`	`77`	`#app-menu-container-settings {`
`78`	`78`	`inset-inline-start: calc(var(--logo-width) + var(--icon-width));`
`79`	`79`	`}`
`@@ -163,7 +163,7 @@`
`163`	`163`	`.menu-scroller-script {`
`164`	`164`	`right: 0;`
`165`	`165`	`transform: translateX(50%);`
`166`		`- width: 700%;`
	`166`	`+ width: 900%;`
`167`	`167`	`}`
`168`	`168`
`169`	`169`	`.dropdown-menu-markup,`
`@@ -173,7 +173,7 @@`
`173`	`173`	`}`
`174`	`174`
`175`	`175`	`.dropdown-menu-script {`
`176`		`- column-count: 3;`
	`176`	`+ column-count: 4;`
`177`	`177`	`column-rule: 1px solid var(--menu-split-color);`
`178`	`178`	`}`
`179`	`179`
`@@ -361,6 +361,13 @@ i.arrow {`
`361`	`361`	`}`
`362`	`362`	`}`
`363`	`363`
	`364`	`+@media only screen and (max-width: 1024px) {`
	`365`	`+ .menu-scroller-script {`
	`366`	`+ transform: translateX(35%);`
	`367`	`+ width: 850%;`
	`368`	`+ }`
	`369`	`+}`
	`370`	`+`
`364`	`371`	`@media only screen and (max-width: 768px) {`
`365`	`372`	`.menu-scroller {`
`366`	`373`	`max-width: 90vw;`
`@@ -386,6 +393,10 @@ i.arrow {`
`386`	`393`	`transform: translateX(-1vw);`
`387`	`394`	`}`
`388`	`395`
	`396`	`+ .dropdown-menu-script {`
	`397`	`+ column-count: 3;`
	`398`	`+ }`
	`399`	`+`
`389`	`400`	`.dropdown-menu.submenu {`
`390`	`401`	`left: 50%;`
`391`	`402`	`margin: 0;`
`@@ -410,7 +421,7 @@ i.arrow {`
`410`	`421`	`height: calc(100vh - (var(--toolbar-height) * 2));`
`411`	`422`	`max-width: 98vw;`
`412`	`423`	`position: fixed;`
`413`		`- top: calc(var(--toolbar-height) * 2);`
	`424`	`+ top: calc((var(--toolbar-height) * 2) - 4px);`
`414`	`425`	`transform: translateX(-1vw);`
`415`	`426`
`416`	`427`	`> .dropdown-menu {`