fix: stack view header (#5474)

Co-authored-by: Benedikt Scheffbuch <[email protected]>

Author: Schwehn42

src/components/NoteDialogComponents/NoteDialogHeader.scss

@@ -1,43 +1,41 @@
 @import "constants/style";
 @import "routes/StackView/StackView.scss";
 
+$header-max-width: 80vw;
+
 .note-dialog-header {
-  font-size: calc(24px + 0.8vw);
-  color: $gray--000;
-  width: fit-content; // change to constant value for overflow ellipsis
-  // height: $stack-view__header-height;
-  min-height: $stack-view__min-height;
-  letter-spacing: $letter-spacing--large;
-  line-height: $line-height--large;
-  text-align: center;
-  cursor: initial;
   display: flex;
+  min-height: $stack-view__min-height;
   flex-direction: column;
-  align-items: center;
   flex-shrink: 0;
+  align-items: center;
   gap: $spacing--base;
+
+  width: $header-max-width;
+  max-width: $header-max-width;
+
+  color: $gray--000;
+
+  letter-spacing: $letter-spacing--large;
+  text-align: center;
+  cursor: initial;
 }
 
 .note-dialog-header__name {
-  width: 100%;
-  margin: $spacing--lg 0 0 0;
+  max-width: 100%;
+
+  font-size: calc($text--2xl + 0.8vw);
+  font-weight: 700;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  &::after {
-    content: " ";
-    display: block;
-    height: 6px;
-    background: var(--accent-color--light);
-    border-radius: $rounded--full;
-    margin-top: $spacing--base;
-  }
+  border-bottom: 6px solid var(--accent-color--light);
 }
 
 .note-dialog-header__description {
-  width: 60%;
+  width: 100%;
   font-size: $text--lg;
   font-weight: 600;
   line-height: 30px;
@@ -50,8 +48,14 @@
   }
 }
 
+@media screen and (max-width: $breakpoint--smartphone) {
+  .note-dialog-header {
+    max-width: calc(100vw - 60px);
+  }
+}
+
 [theme="dark"] {
-  .note-dialog-header > h2::after {
-    background: var(--accent-color--dark);
+  .note-dialog-header__name {
+    border-bottom-color: var(--accent-color--dark);
   }
 }

src/components/NoteDialogComponents/NoteDialogHeader.tsx

@@ -9,9 +9,9 @@ type NoteDialogHeaderProps = {
 
 export const NoteDialogHeader: FC<NoteDialogHeaderProps> = ({columnName, columnDescription}: NoteDialogHeaderProps) => (
   <div className="note-dialog-header">
-    <h2 className="note-dialog-header__name" data-clarity-mask="True">
+    <div className="note-dialog-header__name" data-clarity-mask="True">
       {columnName}
-    </h2>
+    </div>
     <TextArea
       className="note-dialog-header__description"
       input={columnDescription}

src/routes/StackView/StackView.scss

@@ -1,6 +1,6 @@
 @import "constants/style";
 
-$stack-view__header-height: 14vh;
+$stack-view__header-height: 164px;
 $stack-view__navigation-height: 14vh;
 $stack-view__min-height: 82px;
 
@@ -11,10 +11,10 @@ $stack-view__min-height: 82px;
 }
 
 .stack-view {
-  display: flex;
+  display: grid;
   height: 100vh;
-  flex-direction: column;
-  align-items: center;
+  grid-template-rows: $stack-view__header-height auto 1fr;
+  justify-items: center;
 
   padding-top: $spacing--xl;
 }
@@ -38,7 +38,8 @@ $stack-view__min-height: 82px;
 .stack-view__content {
   position: relative;
 
-  height: calc(100vh - $stack-view__header-height - $stack-view__navigation-height);
+  // subtracting header, navigation, and spacing from viewport height to limit extendable note
+  height: calc(100vh - ($spacing--xl + $stack-view__header-height + $stack-view__navigation-height + $spacing--xl));
   width: 100vw;
   border-radius: $note__border-radius;