Merge pull request #2803 from rommapp/misc/fix-additional-content-game-details

fix: Game details view little fixes

frontend/src/components/common/Game/FavBtn.vue

@@ -21,7 +21,7 @@ async function switchFromFavorites() {
 <template>
   <v-btn
     v-if="auth.scopes.includes('roms.user.write')"
-    class="translucent text-shadow"
+    class="translucent-light text-shadow"
     rouded="0"
     size="small"
     variant="text"

frontend/src/styles/common.css

@@ -1,7 +1,6 @@
 html,
 body {
   background-color: rgba(var(--v-theme-background)) !important;
-  overflow-y: auto;
   margin: 0 !important;
 }
 .main-layout {
@@ -16,6 +15,10 @@ body {
   background: rgba(0, 0, 0, 0.5) !important;
   font-weight: 500 !important;
 }
+.translucent-light {
+  background: rgba(0, 0, 0, 0.2) !important;
+  font-weight: 500 !important;
+}
 .tooltip :deep(.v-overlay__content) {
   background: rgba(255, 255, 255, 1) !important;
   color: rgb(41, 41, 41) !important;

frontend/src/views/GameDetails.vue

@@ -157,12 +157,18 @@ watch(
     <BackgroundHeader />
 
     <v-row
-      class="px-6 mb-6"
+      :class="{ 'justify-center px-6': mdAndDown, 'd-flex px-16': lgAndUp }"
       no-gutters
-      :class="{ 'justify-center': smAndDown }"
     >
-      <v-col cols="auto">
-        <v-container id="artwork-container" :width="270" class="pa-0">
+      <v-col
+        :cols="mdAndDown ? 'auto' : undefined"
+        :style="mdAndUp ? 'flex: 0 0 270px; width: 270px' : undefined"
+      >
+        <v-container
+          id="artwork-container"
+          :width="mdAndDown ? 270 : undefined"
+          class="pa-0"
+        >
           <GameCard
             :key="currentRom.updated_at"
             :rom="currentRom"
@@ -174,17 +180,7 @@ watch(
         </v-container>
       </v-col>
 
-      <v-col
-        :md="
-          !(
-            lgAndUp &&
-            (currentRom.igdb_metadata?.expansions?.length ||
-              currentRom.igdb_metadata?.dlcs?.length)
-          )
-            ? 8
-            : 7
-        "
-      >
+      <v-col class="flex-grow-1">
         <div :class="{ 'position-absolute title-desktop pl-4': mdAndUp }">
           <TitleInfo :rom="currentRom" />
         </div>
@@ -287,7 +283,7 @@ watch(
           (currentRom.igdb_metadata?.expansions?.length ||
             currentRom.igdb_metadata?.dlcs?.length)
         "
-        cols="auto"
+        style="flex: 0 0 270px; width: 270px"
       >
         <v-container class="pa-0">
           <AdditionalContent class="mt-2" :rom="currentRom" />