Merge pull request #2438 from G-Ambatte/fixToC-#2437

Change ToC to use flexbox

themes/V3/5ePHB/style.less

@@ -657,72 +657,78 @@ body {
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.page .toc{
+.page {
+	&:has(.toc):after {
+		display: none;
+	}
+	.toc {
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
-	h1 {
+		h1 {
-		text-align    : center;
+			text-align    : center;
-		margin-bottom : 0.3cm;
+			margin-bottom : 0.3cm;
-	}
-	a{
-		display         : inline;
-		color           : inherit;
-		text-decoration : none;
-		&:hover{
-			text-decoration : underline;
 		}
-	}
+		a{
-	h4 {
+			display         : inline;
-		margin-top  : 0.2cm;
+			color           : inherit;
-		line-height : 0.4cm;
+			text-decoration : none;
-		& + ul li {
+			&:hover{
-			line-height: 1.2em;
+				text-decoration : underline;
+			}
 		}
-	}
+		h4 {
-	ul{
+			margin-top  : 0.2cm;
-		padding-left    : 0;
+			line-height : 0.4cm;
-		list-style-type : none;
+			& + ul li {
-		li + li h3 {
+				line-height: 1.2em;
-			margin-top  : 0.26cm;
+			}
-			line-height : 1em
 		}
-		h3 span:first-child::after {
+		ul{
-			border : none;
+			padding-left    : 0;
-		}
+			list-style-type : none;
-		span {
+			margin-top      : 0;
-			display : table-cell;
+			a {
-			&:first-child {
+				width           : 100%;
-				position   :       relative;
+				display         : flex;
-				overflow   :       hidden;
+				flex-flow       : row nowrap;
-				&::after {
+				justify-content : space-between;
+			}
+			li + li h3 {
+				margin-top  : 0.26cm;
+				line-height : 1em
+			}
+			h3 span:first-child::after {
+				border : none;
+			}
+			span {
+				display : contents;
+				&:first-child::after {
 					content       : "";
-					position      : absolute;
 					bottom        : 0.08cm;
-					margin-left   : 0.06cm;        /* Spacing before dot leaders */
+					flex          : 1;
-					width         : 100%;
+					margin-left   : 0.08cm;        /* Spacing before dot leaders */
+					margin-right  : 0.16cm;
 					border-bottom : 0.05cm dotted #000;
+					margin-bottom : 0.08cm;
+				}
+				&:last-child {
+					display     : inline-block;
+					align-self  : flex-end;
+					font-family : "BookInsanityRemake";
+					font-size   : 0.34cm;
+					font-weight : normal;
+					color       : #000;
 				}
 			}
-			&:last-child {
+			ul { /*List indent*/
-				font-family    : BookInsanityRemake;
+				margin-left : 1em;
-				font-size      : 0.34cm;
-				font-weight    : normal;
-				color          : black;
-				text-align     : right;
-				vertical-align : bottom; /* Keep page number bottom-aligned */
-				width          : 1%;
-				padding-left   : 0.06cm; /* Spacing after dot leaders */
-				/*white-space  : nowrap; /* Uncomment if needed */
 			}
 		}
-		ul { /*List indent*/
+		&.wide{
-			margin-left : 1em;
+			.useColumns(0.96, @fillMode: balance);
 		}
 	}
-	&.wide{
-		.useColumns(0.96, @fillMode: balance);
-	}
 }
 
 //*****************************