Always showing actor photos horizontally.

assets/components/actors/actor.vue

@@ -285,20 +285,12 @@
 			</div>
 
 			<div class="actor-content">
-				<Releases :releases="actor.releases" />
-
-				<div
+				<Photos
 					v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
-					class="photos-container"
-				>
-					<Photos :actor="actor" />
+					:actor="actor"
+				/>
 
-					<Photos
-						:actor="actor"
-						:class="{ expanded }"
-						class="compact"
-					/>
-				</div>
+				<Releases :releases="actor.releases" />
 			</div>
 		</div>
 	</div>
@@ -429,7 +421,6 @@ export default {
     }
 
     .avatar-link {
-        font-size: 0;
         padding: 0 0 1rem 1rem;
         flex-shrink: 0;
     }
@@ -437,6 +428,7 @@ export default {
     .avatar {
         height: 100%;
         flex-shrink: 0;
+		border: solid 3px var(--lighten-hint);
         margin: 0 .5rem 0 0;
     }
 }
@@ -613,7 +605,7 @@ export default {
 .actor-content {
     display: flex;
     flex-grow: 1;
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .heading {
@@ -621,13 +613,6 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.photos-container {
-    box-sizing: border-box;
-    border-left: solid 1px $shadow-hint;
-    padding: 1rem 1rem 1rem 1.5rem;
-    margin: 0 0 0 .5rem;
-}
-
 .photos.compact {
     display: none;
 }
@@ -660,20 +645,6 @@ export default {
     .actor-content {
         flex-direction: column;
     }
-
-    .photos-container {
-        border: none;
-        border-bottom: solid 1px $shadow-hint;
-        margin: 0 0 .5rem 0;
-    }
-
-    .photos {
-        display: none;
-    }
-
-    .photos.compact {
-        display: flex;
-    }
 }
 
 @media(max-width: $breakpoint) {