Change media queries

src/components/control_panel.jsx

@@ -1204,7 +1204,7 @@ export default function ControlPanel(props) {
 
   function toolbar() {
     return (
-      <div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 3xl:mx-6 select-none overflow-x-hidden toolbar-theme">
+      <div className="py-1 px-5 flex justify-between items-center rounded-xl my-1 sm:mx-1 xl:mx-6 select-none overflow-x-hidden toolbar-theme">
         <div className="flex justify-start items-center">
           {layoutDropdown()}
           <Divider layout="vertical" margin="8px" />

src/pages/shortcuts.jsx

@@ -110,7 +110,7 @@ export default function Shortcuts() {
             alt="logo"
             className="me-2 sm:h-[28px] md:h-[46px]"
           />
-          <div className="ms-4 sm:text-base 3xl:text-lg font-semibold">
+          <div className="ms-4 sm:text-sm xl:text-lg font-semibold">
             Keyboard shortcuts
           </div>
         </div>
@@ -160,7 +160,7 @@ export default function Shortcuts() {
           onSelect={(v) => {}}
         ></AutoComplete>
       </div>
-      <div className="grid sm:grid-cols-1 lg:grid-cols-2 3xl:grid-cols-3 m-6 gap-5 select-none">
+      <div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 m-6 gap-5 select-none">
         {shortcuts.map((s, i) => (
           <div className="p-3 card-theme rounded" key={i}>
             <div className="flex justify-between sm:text-sm">

tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
     screens: {
       '3xl': {'max': '2047px'},
       '2xl': {'max': '1535px'},
-      'xl': {'max': '1279px'},
+      'xl': {'min': '1024px'},
       'lg': {'max': '1023px'},
       'md': {'max': '767px'},
       'sm': {'max': '639px'}