style refine

lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss

@@ -33,8 +33,9 @@
   }
 
   .shortcut-key {
+    justify-self: end;
     font-family: 'WorkSans-Bold';
-    background-color: var(--modal-hotkey-bg);
+    border: 1px solid var(--modal-hotkey-border-color);
     padding: 0.4rem 1rem;
     width: max-content;
     border-radius: 0.4rem;
@@ -45,9 +46,9 @@
   }
 
   .shortcut-description {
-    justify-self: end;
-    text-align: right;
-    width: 15rem;
+    justify-self: start;
+    text-align: left;
+    width: 18rem;
 
     @include mobile {
       text-align: left;

lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx

@@ -23,6 +23,7 @@ const Shortcuts = () => {
       <Button
         onClick={shortcutStateHandler}
         disabled={shortcutVisibility}
+        style={{ border: 0 }}
         icon={
           <svg
             xmlns="http://www.w3.org/2000/svg"

lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx

@@ -13,8 +13,8 @@ function ShortCut(props: Shortcut) {
 
   return (
     <div className="shortcut-option">
-      <div className="shortcut-key">{children}</div>
       <div className="shortcut-description">{content}</div>
+      <div className="shortcut-key">{children}</div>
     </div>
   )
 }
@@ -45,7 +45,10 @@ export default function ShortcutsModal() {
         <ShortCut content="View original image">
           <p>Hold Tab</p>
         </ShortCut>
-        <ShortCut content="Reset zoom/pan & Cancel mask drawing">
+        <ShortCut content="Reset zoom/pan">
+          <p>Esc</p>
+        </ShortCut>
+        <ShortCut content="Cancel mask drawing">
           <p>Esc</p>
         </ShortCut>
         <ShortCut content="Decrease Brush Size">