@@ -33,15 +33,15 @@ export default function Attributes(props: IProps) {
3333 resourceId = { resource . id }
3434 namespaceId = { namespaceId }
3535 />
36- < div className = "flex items-center gap-3" >
37- < Link className = "size-4 text-muted-foreground" />
36+ < div className = "flex flex-wrap sm:flex-nowrap items-start gap-3" >
37+ < Link className = "shrink-0 size-4 text-muted-foreground" />
3838 < span className = "text-muted-foreground font-medium min-w-[80px]" >
3939 { t ( 'resource.attrs.url' ) }
4040 </ span >
4141 < a
4242 target = "_blank"
4343 href = { resource . attrs . url }
44- className = "text-base text-foreground"
44+ className = "text-base break-all text-foreground truncate "
4545 >
4646 { resource . attrs . url }
4747 </ a >
@@ -58,7 +58,7 @@ export default function Attributes(props: IProps) {
5858 </div>
5959 )} */ }
6060 { resource . created_at && (
61- < div className = "flex items-center gap-3" >
61+ < div className = "flex flex-wrap sm:flex-nowrap items-center gap-3" >
6262 < Clock className = "size-4 text-muted-foreground" />
6363 < span className = "text-muted-foreground font-medium min-w-[80px]" >
6464 { t ( 'resource.attrs.created' ) }
@@ -90,7 +90,7 @@ export default function Attributes(props: IProps) {
9090 resourceId = { resource . id }
9191 namespaceId = { namespaceId }
9292 />
93- < div className = "flex items-center gap-3" >
93+ < div className = "flex flex-wrap sm:flex-nowrap items-center gap-3" >
9494 < File className = "size-4 text-muted-foreground" />
9595 < span className = "text-muted-foreground font-medium min-w-[80px]" >
9696 { t ( 'resource.attrs.filename' ) }
@@ -131,7 +131,7 @@ export default function Attributes(props: IProps) {
131131 </ Button >
132132 </ div >
133133 { resource . created_at && (
134- < div className = "flex items-center gap-3" >
134+ < div className = "flex flex-wrap sm:flex-nowrap items-center gap-3" >
135135 < Clock className = "size-4 text-muted-foreground" />
136136 < span className = "text-muted-foreground font-medium min-w-[80px]" >
137137 { t ( 'resource.attrs.created' ) }
@@ -174,7 +174,7 @@ export default function Attributes(props: IProps) {
174174 </div>
175175 )} */ }
176176 { resource . created_at && (
177- < div className = "flex items-center gap-3" >
177+ < div className = "flex flex-wrap sm:flex-nowrap items-center gap-3" >
178178 < Clock className = "size-4 text-muted-foreground" />
179179 < span className = "text-muted-foreground font-medium min-w-[80px]" >
180180 { t ( 'resource.attrs.created' ) }
0 commit comments