Adjusted functionality and style of class/background/species screens

src/renderer/styles.css

@@ -69,7 +69,7 @@ body {
     radial-gradient(circle at 16% 0%, rgba(71, 131, 206, 0.34), transparent 34%),
     radial-gradient(circle at 88% -8%, rgba(234, 163, 78, 0.28), transparent 40%),
     linear-gradient(180deg, rgba(14, 24, 40, 0.96), rgba(9, 16, 28, 0.97));
-  backdrop-filter: blur(12px);
+  /* backdrop-filter: blur(12px); */
   position: relative;
   overflow: visible;
   isolation: isolate;
@@ -516,9 +516,9 @@ body {
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(14, 22, 35, 0.98), rgba(8, 14, 24, 0.99));
   box-shadow: var(--shadow);
-  display: grid;
-  grid-template-rows: auto auto 1fr;
-  overflow: hidden;
+  /* display: grid; */
+  /* grid-template-rows: auto auto 1fr; */
+  overflow: scroll;
 }
 
 .character-modal button,
@@ -1529,6 +1529,7 @@ body {
 .entity-card-grid {
   flex: 1;
   min-height: 0;
+  max-height: clamp(260px, 44vh, 560px);
   overflow: auto;
   padding-right: 4px;
   gap: 10px;
@@ -1737,7 +1738,7 @@ body {
   color: #edf4ff;
   overflow: hidden;
   text-align: left;
-  padding: 0;
+  padding: 0 !important;
   display: block;
   min-height: 0;
   aspect-ratio: 1 / 1;
@@ -1837,17 +1838,18 @@ body {
   place-items: center;
   padding: 18px;
   background: rgba(2, 6, 12, 0.74);
-  backdrop-filter: blur(2px);
+  /* backdrop-filter: blur(2px); */
 }
 
 .entity-popover {
   width: 70%;
   max-height: calc(70vh - 36px);
-  overflow: auto;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--line-strong);
   border-radius: 14px;
   background: rgba(8, 12, 20, 0.98);
-  padding: 12px;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
 }
 
@@ -1856,9 +1858,8 @@ body {
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding-bottom: 10px;
+  padding: 12px;
   border-bottom: 1px solid var(--line);
-  margin-bottom: 10px;
 }
 
 .entity-popover-header h4 {
@@ -1867,6 +1868,22 @@ body {
   font-size: 1.05rem;
 }
 
+.entity-popover-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+}
+
+.entity-popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px;
+  border-top: 1px solid var(--line);
+  background: rgba(5, 9, 16, 0.94);
+}
+
 .entity-detail--popover {
   min-height: 0;
 }
@@ -1886,6 +1903,7 @@ body {
 
 .chooser-layout {
   min-height: 0;
+  max-height: 62vh;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 12px;
@@ -2249,10 +2267,10 @@ body {
     width: 100%;
   }
 
-  .ability-score-strip,
+  /* .ability-score-strip,
   .ability-assignment-grid--ability-step {
     grid-template-columns: 1fr;
-  }
+  } */
 
   .chooser-layout {
     grid-template-columns: 1fr;
@@ -2305,7 +2323,6 @@ body {
     width: calc(100vw - 20px);
     max-height: calc(100vh - 20px);
     border-radius: 12px;
-    padding: 10px;
   }
 
   .entity-popover-header {