diff --git a/src/components/lab/LabBottomPanel/styles.module.scss b/src/components/lab/LabBottomPanel/styles.module.scss index 7588dc30..22bbebd5 100644 --- a/src/components/lab/LabBottomPanel/styles.module.scss +++ b/src/components/lab/LabBottomPanel/styles.module.scss @@ -2,6 +2,10 @@ .wrap { padding: $gap $lab_gap $lab_gap; + + @include tablet { + padding: $gap $lab_gap_mobile $lab_gap_mobile; + } } .timestamp { diff --git a/src/components/lab/LabDescription/styles.module.scss b/src/components/lab/LabDescription/styles.module.scss index b6b8b452..aaccef77 100644 --- a/src/components/lab/LabDescription/styles.module.scss +++ b/src/components/lab/LabDescription/styles.module.scss @@ -5,6 +5,7 @@ line-height: 1.3em; @include tablet { + padding: $lab_gap_mobile $lab_gap_mobile 0; position: relative; max-height: 30vh; overflow: hidden; diff --git a/src/components/lab/LabNodeTitle/styles.module.scss b/src/components/lab/LabNodeTitle/styles.module.scss index dab00963..b2720933 100644 --- a/src/components/lab/LabNodeTitle/styles.module.scss +++ b/src/components/lab/LabNodeTitle/styles.module.scss @@ -2,6 +2,10 @@ .wrap { padding: $lab_gap - $gap $lab_gap 0; + + @include tablet { + padding: $gap $lab_gap_mobile 0; + } } .title { @@ -10,6 +14,9 @@ overflow: hidden; flex: 1; text-overflow: ellipsis; + word-break: break-all; + + @include clamp(2, 1.2em); a { text-decoration: none; @@ -17,7 +24,6 @@ } @include tablet { - white-space: nowrap; padding-bottom: 0; font: $font_20_semibold; } diff --git a/src/components/lab/LabText/styles.module.scss b/src/components/lab/LabText/styles.module.scss index be88c331..5ef94907 100644 --- a/src/components/lab/LabText/styles.module.scss +++ b/src/components/lab/LabText/styles.module.scss @@ -5,6 +5,7 @@ line-height: 1.3em; @include tablet { + padding: 0 $lab_gap_mobile; position: relative; max-height: 100vh; overflow: hidden; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1433068b..9c1ec76a 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,6 +4,7 @@ $header_height: 64px; $cell: 280px; $gap: 10px; $lab_gap: $gap * 3; +$lab_gap_mobile: $gap * 2; $grid_line: 5px; $content_width: $cell * 5 + $grid_line * 4; $spc: $gap * 2;