@hanifhan1f/vidstack-react 1.12.21 → 1.12.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hanifhan1f/vidstack-react",
3
3
  "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
4
- "version": "1.12.21",
4
+ "version": "1.12.24",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "types": "index.d.ts",
@@ -854,7 +854,7 @@
854
854
  }
855
855
 
856
856
  .vds-video-layout .vds-episodes-list {
857
- flex: 1;
857
+ flex: 1 1 auto;
858
858
  min-height: 0;
859
859
  margin: 0;
860
860
  padding: 10px 10px 14px;
@@ -862,11 +862,17 @@
862
862
  overflow-x: hidden;
863
863
  display: flex;
864
864
  flex-direction: column;
865
+ align-items: stretch;
865
866
  gap: 8px;
866
867
  scrollbar-width: thin;
867
868
  scrollbar-color: rgb(255 255 255 / 28%) transparent;
868
869
  }
869
870
 
871
+ /* Each row must keep its full height — min-height:0 on items was collapsing rows and stacking text. */
872
+ .vds-video-layout .vds-episodes-list > .vds-episode-item {
873
+ flex: 0 0 auto;
874
+ }
875
+
870
876
  .vds-video-layout .vds-episodes-empty {
871
877
  padding: 12px;
872
878
  font-size: 12px;
@@ -948,9 +954,12 @@
948
954
  .vds-video-layout .vds-episode-item {
949
955
  display: grid !important;
950
956
  grid-template-columns: 148px minmax(0, 1fr) !important;
957
+ grid-template-rows: auto;
951
958
  align-items: start;
959
+ align-content: start;
952
960
  width: 100%;
953
- min-height: 0;
961
+ min-height: min-content;
962
+ box-sizing: border-box;
954
963
  gap: 12px;
955
964
  padding: 10px 10px 10px 8px;
956
965
  border-radius: 10px;
@@ -1000,6 +1009,7 @@
1000
1009
  flex-wrap: wrap;
1001
1010
  align-items: center;
1002
1011
  gap: 6px;
1012
+ flex: 1;
1003
1013
  min-width: 0;
1004
1014
  }
1005
1015
 
@@ -1044,11 +1054,13 @@
1044
1054
  }
1045
1055
 
1046
1056
  .vds-video-layout .vds-episode-thumb-wrap {
1057
+ position: relative;
1047
1058
  width: 148px;
1048
1059
  height: 84px;
1049
1060
  border-radius: 8px;
1050
1061
  overflow: hidden;
1051
1062
  flex-shrink: 0;
1063
+ align-self: start;
1052
1064
  }
1053
1065
 
1054
1066
  .vds-video-layout .vds-episode-thumb-placeholder {
@@ -1057,8 +1069,12 @@
1057
1069
 
1058
1070
  .vds-video-layout .vds-episode-body {
1059
1071
  min-width: 0;
1060
- display: grid;
1061
- align-content: start;
1072
+ width: 100%;
1073
+ max-width: 100%;
1074
+ display: flex;
1075
+ flex-direction: column;
1076
+ align-items: stretch;
1077
+ align-self: start;
1062
1078
  gap: 5px;
1063
1079
  padding-top: 1px;
1064
1080
  }
@@ -1115,11 +1131,12 @@
1115
1131
  font-size: 11px;
1116
1132
  line-height: 1.45;
1117
1133
  color: rgb(255 255 255 / 68%);
1118
- line-clamp: 3;
1119
1134
  display: -webkit-box;
1120
- -webkit-line-clamp: 3;
1121
1135
  -webkit-box-orient: vertical;
1136
+ -webkit-line-clamp: 3;
1122
1137
  overflow: hidden;
1138
+ word-break: break-word;
1139
+ min-height: 0;
1123
1140
  }
1124
1141
 
1125
1142
  @media (max-width: 640px) {