fix: fix responsive issues in ordinary keyboard

Dygmalab · Aug 25, 2023 · 39745a9 · 39745a9
1 parent 83717e2
commit 39745a9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/src/renderer/component/Select/SelectSuperKeyCustomDropdown.js b/src/renderer/component/Select/SelectSuperKeyCustomDropdown.js
@@ -29,6 +29,8 @@ width: 100%;
     text-transform: capitalize;
     font-size: inherit;
     line-height: 1em;
+    overflow: initial;
+    position: relative;
     
   }
   .dropdownItemSelected {
@@ -50,9 +52,12 @@ width: 100%;
   }
   .badge.badge-primary {
     font-weight: 700;
-    font-size: 9px;
     padding: 2px 5px;
     line-height: 1em;
+    font-size: 7px;
+    position: absolute;
+    top: -6px;
+    margin-left: -3px;
   }
 }
 .active .dropdownItemSelected .badge-circle {
@@ -93,20 +98,6 @@ width: 100%;
   height: 142px;
   overflow-y: auto;
 }
-@media (max-width: 980px) {
-  .custom-dropdown {
-    .dropdownItem {
-      overflow: initial;
-      position: relative;
-    }
-    .badge.badge-primary {
-      font-size: 7px;
-      position: absolute;
-      top: -6px;
-      margin-left: -3px;
-    }
-  }
-}
 `;
 
 class SelectSuperKeyCustomDropdown extends Component {

diff --git a/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js b/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js
@@ -97,7 +97,6 @@ import KR from "@Renderer/modules/KeyPickerKeyboard/KR.json";
 import SWGR from "@Renderer/modules/KeyPickerKeyboard/SWGR.json";
 import EU from "@Renderer/modules/KeyPickerKeyboard/EU.json";
 
-
 const Style = Styled.div`
 width: 100%;
 @media screen and (min-width: 1980px) and (min-height: 980px) {
@@ -262,6 +261,22 @@ width: 100%;
   .keysTools { grid-area: 2 / 6 / 3 / 10; }
   .keysLED { grid-area: 2 / 10 / 3 / 13; }
 }
+@media (max-width: 1460px) {
+  .KeysWrapper.notWireless {
+    .keysContainerGrid {
+      grid-template-rows: repeat(3, 1fr);
+    }
+    .keysSuperkeys { grid-area: 1 / 1 / 2 / 5; }
+    .keysMacros { grid-area: 1 / 5 / 2 / 9; }
+    .keysLayerLock { grid-area: 1 / 9 / 2 / 13; }
+    .keysOSM { grid-area: 2 / 1 / 3 / 4; }
+    .keysMouseEvents { grid-area: 2 / 4 / 3 / 7; }
+    .keysNoKey { grid-area: 2 / 7 / 3 / 10; }
+    .keysLED { grid-area: 2 / 10 / 3 / 13; }
+    .keysMedia { grid-area: 3 / 1 / 4 / 7; }
+    .keysTools { grid-area: 3 / 7 / 4 / 13; }
+  }
+}
 
 .KeysWrapper.isWireless {
   .keysContainerGrid {