improve this, handle edge cases and text that are too large

[github-actions]

ui/packages/styles/src/layouts/_scroll.scss

Line 59 in 50ab5f5

// TODO: improve this, handle edge cases and text that are too large

@use "../utils/module" as utils;

// Scroll area component
//
// @group Components
@mixin scroll {
	@layer definitions {
		.#{utils.$layout-scroll} {
			box-sizing: border-box;

			@media (any-pointer: coarse) {
				&::-webkit-scrollbar {
					width: 0.4rem;
					height: 0.4rem;
				}

				&::-webkit-scrollbar-track {
					background-color: utils.$color-bg;
				}

				&::-webkit-scrollbar-thumb {
					background-color: utils.color(dark, 0.3);
				}

				&::-webkit-scrollbar-track,
				&::-webkit-scrollbar-thumb {
					border-radius: 100px * utils.strip-unit(utils.$size-radius);
				}
			}

			&.#{utils.$prefix-default}--vertical {
				max-height: 100%;
				overflow-x: hidden;
				overflow-y: auto;

				@layer defaults {
					& {
						padding: 0.1rem 0;
					}
				}
			}

			&.#{utils.$prefix-default}--horizontal {
				// always only mode
				// @modifier
				&.#{utils.$prefix-default}--always {
					max-width: 100%;
					overflow-x: auto;
					overflow-y: hidden;

					> * {
						min-width: 100%;
						box-sizing: border-box;

						&:last-child {
							margin-bottom: 0.7rem;
						}

						// TODO: improve this, handle edge cases and text that are too  large
						tr {
							td,
							th {
								white-space: nowrap;
							}
						}
					}
				}

				@if utils.$allow-responsive {
					// mobile & hover only
					@media (max-width: utils.$querie-tablet) {
						table.#{utils.$layout-table} {
							thead,
							tbody {
								tr {
									th,
									td {
										&.#{utils.$prefix-default}--sticky {
											position: relative;
										}
									}
								}
							}
						}

						@media (hover: none) {
							&:not(.#{utils.$prefix-default}--always) {
								max-width: 100vw;
								height: auto;
								box-sizing: border-box;
								overflow-x: auto;
								overflow-y: hidden;
								padding-right: 0;

								> * {
									overflow: visible;
									margin-left: 0 !important;
									margin-right: 0 !important;

									@include utils.flex-box(
										row,
										nowrap !important,
										flex-start !important,
										flex-start !important,
										inline-flex
									);

									@layer defaults {
										& {
											// @defaults width
											width: auto;
										}
									}
									&.#{utils.$layout-grid}:after {
										width: 1px;
									}

									&:not(:first-child)::after {
										content: "";
										display: block;
										width: 1rem;
										height: 1rem;
										flex: 0 0 auto;
									}

									> * {
										flex: 0 0 auto;

										&:last-child {
											margin-right: 0 !important;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}