fix: improve context menu shortcut styling

src/locales/en/translation.json

@@ -119,6 +119,7 @@
     "open_folder": "Open folder",
     "open_download_location": "See downloaded files",
     "create_shortcut": "Create desktop shortcut",
+    "create_shortcut_simple": "Create shortcut",
     "clear": "Clear",
     "remove_files": "Remove files",
     "remove_from_library_title": "Are you sure?",

src/locales/pt-BR/translation.json

@@ -107,6 +107,7 @@
     "open_folder": "Abrir pasta",
     "open_download_location": "Ver arquivos baixados",
     "create_shortcut": "Criar atalho na área de trabalho",
+    "create_shortcut_simple": "Criar atalho",
     "remove_files": "Remover arquivos",
     "options": "Gerenciar",
   "properties": "Propriedades",

src/renderer/src/components/context-menu/context-menu.scss

@@ -130,6 +130,11 @@
     margin-top: 4px;
   }
 
+  &--game-not-installed &__submenu &__item--danger:first-of-type {
+    border-top: none;
+    margin-top: 0;
+  }
+
   &__separator {
     height: 1px;
     background: globals.$border-color;

src/renderer/src/components/context-menu/context-menu.tsx

@@ -20,6 +20,7 @@ export interface ContextMenuProps {
   position: { x: number; y: number };
   onClose: () => void;
   children?: React.ReactNode;
+  className?: string;
 }
 
 export function ContextMenu({
@@ -28,6 +29,7 @@ export function ContextMenu({
   position,
   onClose,
   children,
+  className,
 }: ContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
   const [adjustedPosition, setAdjustedPosition] = useState(position);
@@ -160,7 +162,7 @@ export function ContextMenu({
   const menuContent = (
     <div
       ref={menuRef}
-      className="context-menu"
+      className={cn("context-menu", className)}
       style={{
         left: adjustedPosition.x,
         top: adjustedPosition.y,

src/renderer/src/components/game-context-menu/game-context-menu.tsx

@@ -68,7 +68,7 @@ export function GameContextMenu({
       ? [
           {
             id: "shortcuts",
-            label: t("create_shortcut"),
+            label: t("create_shortcut_simple"),
             icon: <LinkIcon size={16} />,
             disabled: isDeleting,
             submenu: [
@@ -181,6 +181,7 @@ export function GameContextMenu({
         visible={visible}
         position={position}
         onClose={onClose}
+        className={!game.executablePath ? "context-menu--game-not-installed" : undefined}
       />
 
       <ConfirmModal

src/renderer/src/pages/game-details/modals/repacks-modal.scss

@@ -2,7 +2,11 @@
 
 .repacks-modal {
   &__filter-container {
-    margin-bottom: calc(globals.$spacing-unit * 2);
+    margin-bottom: 1rem;
+  }
+
+  &__filter-top {
+    margin-bottom: 1rem;
   }
 
   &__repacks {
@@ -63,27 +67,50 @@
   }
 
   &__download-sources {
-    display: flex;
+    padding: 0.75rem;
-    flex-direction: row;
+    background-color: var(--color-background-light);
-    flex-wrap: wrap;
+    border-radius: 8px;
-    gap: calc(globals.$spacing-unit / 2);
+    margin-bottom: 1rem;
-    margin-top: calc(globals.$spacing-unit * 1);
+    margin-top: calc(globals.$spacing-unit * 0.5);
-    max-height: 200px;
-    overflow: auto;
-    padding-right: 8px;
-  }
-
-  &__source-item {
-    display: block;
-    flex: 1 1 auto;
-    min-width: 150px;
   }
 
   &__filter-label {
     font-size: globals.$small-font-size;
-    font-weight: 500;
+    font-weight: 600;
-    margin-bottom: calc(globals.$spacing-unit / 2);
+    margin-bottom: 0.75rem;
-    color: globals.$body-color;
+    color: var(--color-text-secondary);
     width: 100%;
   }
+
+  &__source-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+    align-items: start;
+  }
+
+  &__source-item {
+    padding: 0.35rem 0.75rem;
+    background: var(--color-surface, rgba(0, 0, 0, 0.03));
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    min-height: 38px;
+    box-sizing: border-box;
+  }
+
+  // Ajustes para o label do checkbox
+  &__source-item :global(.checkbox-field) {
+    width: 100%;
+  }
+
+  &__source-item :global(.checkbox-field__label) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
 }

src/renderer/src/pages/game-details/modals/repacks-modal.tsx

@@ -181,15 +181,20 @@ export function RepacksModal({
 
           <div className="repacks-modal__download-sources">
             <p className="repacks-modal__filter-label">{t("filter_by_source")}</p>
-            {downloadSources.map((source) => (
+            <div className="repacks-modal__source-grid">
-              <div key={source.fingerprint} className="repacks-modal__source-item">
+              {downloadSources.map((source) => (
-                <CheckboxField
+                <div 
-                  label={source.name || source.url}
+                  key={source.fingerprint} 
-                  checked={selectedFingerprints.includes(source.fingerprint)}
+                  className="repacks-modal__source-item"
-                  onChange={() => toggleFingerprint(source.fingerprint)}
+                >
-                />
+                  <CheckboxField
-              </div>
+                    label={source.name || source.url}
-            ))}
+                    checked={selectedFingerprints.includes(source.fingerprint)}
+                    onChange={() => toggleFingerprint(source.fingerprint)}
+                  />
+                </div>
+              ))}
+            </div>
           </div>
         </div>